css透明度opacity – CSS高级教程 cssopacity|CSS

上一章CSS高级教程请查看：css精灵sprite
CSS属性指定元素的透明度。
跨浏览器的不透明度不透明性现在是CSS3规范的一部分，但它已经存在了很长时间。然而，旧的浏览器有不同的方式来控制不透明度或透明度。
在Firefox, Safari, Chrome, Opera和IE9中的CSS不透明度
下面是所有当前浏览器中最新的CSS不透明度语法。

p { opacity: 0.7; }

上面的样式规则将使段落元素70%不透明(或30%透明)。
不透明度属性的值从0.0到1.0，不透明度设置为1将使元素完全不透明(即0%透明)，而不透明度为0将使元素完全透明(即100%透明)。
在Internet Explorer 8和更低中的CSS不透明度
Internet Explorer 8和更早的版本支持一个只支持微软的属性“alpha过滤器”来控制一个元素的透明度。

p { filter: alpha(opacity=50); zoom: 1; /* Fix for IE7 */ }

注意：Alpha过滤器在IE中接受从0到100的值。值0使元素完全透明(即100%透明)，而值100使元素完全不透明(即0%透明)。
所有浏览器的CSS不透明度结合以上两个步骤，你将得到所有浏览器的不透明度。

p { opacity: 0.5; /* 现代浏览器的不透明度 */ filter: alpha(opacity=50); /* IE8和更低的不透明度 */ zoom: 1; /* Fix for IE7 */ }

警告:在Internet Explorer 8和更低版本中包含alpha过滤器来控制透明度会在样式表中创建无效代码，因为这是一个只针对微软的属性，而不是一个标准的CSS属性。
CSS图像不透明度【css透明度opacity – CSS高级教程】你也可以使用CSS不透明度来制作透明的图像。
下图中的三幅图像都来自同一源图像，它们之间唯一的区别是它们的不透明性。

文章图片
更改mouse over图像不透明度下面的示例演示了CSS图像不透明度的一种常见用法，当用户将鼠标指针移到图像上时，图像的不透明度会发生变化。

文章图片
透明框文本当在一个元素上使用不透明度时，不仅元素的背景将具有透明度，而且它的所有子元素也将变得透明。如果不透明度值变高，透明元素内的文本将难以阅读。

文章图片
为了防止这种情况，你可以使用透明的PNG图像，或者将文本块放在透明框外，然后使用负边缘或CSS定位将其可视地推入框内。

div { float: left; opacity: 0.7; border: 1px solid #949781; } p { float: left; position: relative; margin-left: -400px; }

使用RGBA CSS透明度除了RGB之外，CSS3还引入了一种新的RGBA方法来指定一种颜色，其中包括alpha透明度作为颜色值的一部分。RGBA代表红蓝绿Alpha。
RGBA声明是设置颜色透明度的一种非常简单的方法。

div { background: rgba(200, 54, 54, 0.5); } p { color: rgba(200, 54, 54, 0.25); }

前三个数字表示RGB值中的颜色，即红色(0-255)、绿色(0-255)、蓝色(0-255)和第四个数字表示0到1之间的alpha透明值(0表示颜色完全透明，而1表示颜色完全不透明)。
关于RGBA透明度需要注意的一个重要特性是——控制单个颜色不透明度的能力。使用RGBA，我们可以使一个元素的文本颜色透明，并保持背景完整。

文章图片
或者保持文本的颜色不变，只改变背景的透明度。

文章图片
你可以看到很容易你可以控制单个颜色的透明度,而不是使用RGBA整个元素，然而总是建议定义一个回退颜色的浏览器不支持RGBA颜色。
注意：RGBA透明度并不影响子元素的方式不透明属性，RGBA的alpha值影响个别颜色的透明度，而不是整个元素。
声明一个备用的颜色所有的浏览器不支持RGBA颜色，然而,你可以提供一个替代等纯色或透明的PNG图像浏览器不支持它。