CSS Opacity(透明度)

opacity CSS属性指定元素的透明度。opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。

跨浏览器透明度

现在，透明度(opacity )是CSS3规范的一部分，但是它存在了很长时间。但是，较旧的浏览器具有不同的方式来指定不透明度或透明度。

Firefox，Safari，Chrome，Opera和IE9中的CSS不透明度

这是所有当前浏览器中CSS不透明度的最新语法。

p {
    opacity: 0.7;
}

上面的样式规则将使段落元素70％不透明（或30％透明）。

opacity属性的取值范围为0.0到1.0。设置为opacity: 1;会使元素完全不透明（即0％透明），opacity: 0;而使元素完全透明（即100％透明）。

Internet Explorer 8及更低版本中的CSS透明度实现方法

Internet Explorer 8和更早版本支持仅Microsoft的属性“ alpha过滤器”来指定元素的透明度。

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

兼容所有浏览器的CSS透明度

结合以上两个步骤，您将获得所有浏览器的透明性代码。

p {
    opacity: 0.5;  /* Opacity for Modern Browsers */
    filter: alpha(opacity=50);  /* Opacity for IE8 and lower */
    zoom: 1;  /* Fix for IE7 */
}

CSS图像透明度

您还可以使用CSS Opacity制作透明图像。

下图中的三个图像均来自同一源图像。它们之间的唯一区别是它们的透明度。

opacity:1	opacity:0.5	opacity:0.25

鼠标悬停时更改图像透明度

以下示例演示了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代表Red Blue Green 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颜色。但是，您可以为不支持的浏览器提供其他选择，例如纯色或透明的PNG图像。

p {
    /* Fallback for web browsers that doesn't support RGBA */
    background: rgb(0, 0, 0);
    /* RGBa with 0.5 opacity */
    background: rgba(0, 0, 0, 0.5);
}