css透明度opacity – 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不透明度来制作透明的图像。

下图中的三幅图像都来自同一源图像，它们之间唯一的区别是它们的不透明性。

更改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图像浏览器不支持它。

p {
    /* 不支持RGBA的web浏览器的备份 */
    background: rgb(0, 0, 0);
    /* RGBa 0.5 opacity */
    background: rgba(0, 0, 0, 0.5);
}

警告：Internet Explorer 8和更早的版本不支持RGBA颜色，他们使用渐变过滤器来实现RGBA效果，这是不建议的。