CSS 图像透明/不透明

使用CSS很容易创建透明的图像。

注意：CSS Opacity属性是W3C的CSS3建议的一部分。

一、示例一：创建一个透明图像

CSS3中属性的透明度是 opacity。

首先，我们将向您展示如何用CSS创建一个透明图像

img

{

  opacity:0.4;

  filter:alpha(opacity=40); /* IE8 及其更早版本 */

}

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

二、示例二：图像的透明度 - 悬停效果

img

{

  opacity:0.4;

  filter:alpha(opacity=40); /*  IE8 及其更早版本 */

}

img:hover

{

  opacity:1.0;

  filter:alpha(opacity=100); /* IE8 及其更早版本 */

}

第一个CSS块是和例1中的代码类似。此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。

此CSS是：opacity=1.

IE8和更早版本使用： filter:alpha(opacity=100).

当鼠标指针远离图像时，图像将重新具有透明度。

三、示例三：透明的盒子中的文字

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

div.background

{

  width:500px;

  height:250px;

  background:url(klematis.jpg) repeat;

  border:2px solid black;

}

div.transbox

{

  width:400px;

  height:180px;

  margin:30px 50px;

  background-color:#ffffff;

  border:1px solid black;

  opacity:0.6;

  filter:alpha(opacity=60); /* IE8 及更早版本 */

}

div.transbox p

{

  margin:30px 40px;

  font-weight:bold;

  color:#000000;

}

</style>

</head>

<body>

<div class="background">

<div class="transbox">

<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。

</p>

</div>

</div>

</body>

</html>

首先，我们创建一个固定的高度和宽度的div元素，带有一个背景图片和边框。然后我们在第一个div内部创建一个较小的div元素。 这个div也有一个固定的宽度，背景颜色，边框 - 而且它是透明的。透明的div里面，我们在P元素内部添加一些文本。

效果：

CSS 图像透明/不透明的更多相关文章

  1. CSS：CSS 图像透明/不透明

    ylbtech-CSS:CSS 图像透明/不透明 1.返回顶部 1. CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 更多 ...

  2. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

  3. CSS：CSS 图像拼合技术

    ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...

  4. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  5. css 图像热区

    CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...

  6. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  7. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...

  8. CSS 图像

    CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...

  9. C#设置欢迎窗体由不透明变透明

    public Form1()        {            InitializeComponent();        } private bool isForm1 = true;  //设 ...

随机推荐

  1. oracle order by 字段不能为空 为空速度慢 不走索引

    oracle order by 字段不能为空 为空速度慢 不走索引

  2. maven项目引入jar包

    今天看一下maven项目的创建和具体操作.

  3. FZU 2144 Shooting Game （贪心区域划分）

    Problem 2144 Shooting Game Accept: 370 Submit: 1902 Time Limit: 1000 mSec Memory Limit : 32768 KB Pr ...

  4. 解决;R语言使用sqldf库是报错"Failed to connect to database: Error: Access denied for user '..'@'localhost' (using password: NO) Error in !dbPreExists : invalid argument type"

    原因:在使用sqldf时,不需要加载RMySQL库 解决方案:在控制台执行释放RMySQL库加载 detach("package:RMySQL", unload=T);

  5. cmake The C compiler identification is unknown

    本地安装有Visual Studio 2015 ,同时更新了update 3 执行上述报错 本地还安装Visual Studio 2017 使用cmake 没问题 分析: 在CMakeFiles/CM ...

  6. 使用 Apache Commons CLI 解析命令行参数示例

    很好的输入参数解析方法 ,转载记录下 转载在: https://www.cnblogs.com/onmyway20xx/p/7346709.html Apache Commons CLI 简介 Apa ...

  7. linux下非root用户的sudo问题

    linux下的root用户是个超级管理员,一般是不用这个用户登录进行操作的,但有时候需要root权限,又不想切换用户的话可以使用sudo命令.但是不是所有的用户都可以使用sudo命令的. 首先可能会遇 ...

  8. java7（3）——增强的catch之自动释放资源

    跟mutilcatch一样,java7提供了自动释放资源的方法,但还是很少看到人使用,估计是麻烦去重写close方法.不过jdk内部一些类已经改成使用增强的catch来释放资源的写法,所以我们有必要了 ...

  9. rabbitMQ基本概念

    一.网页登录方法 http://127.0.0.1:15672/ 用户名和密码默认为guest/guest 用java代码去连接rabbitmq用的端口是5672 二.rabbitMQ基本概念 Rab ...

  10. 汇智课堂 Node.js相关课程

    Node.js入门 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞I/O 模型 ...