CSS 不透明度

opacity CSS 属性指定元素的透明度。

跨浏览器不透明度

不透明度现在是 CSS3 规范的一部分，但它已经存在了很长时间。但是，较旧的浏览器有不同的方法来控制不透明度或透明度。

Firefox，Safari，Chrome，Opera 和 IE9 中的 CSS Opacity

这是所有当前浏览器中 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 */
}

注： 在 IE 浏览器 alpha 滤镜从接受 0 到 100 的值。值 0 使元素完全透明（即 100% 透明），而值 100 使元素完全不透明（即 0% 透明）。

所有浏览器的 CSS 不透明度

结合上述两个步骤，你将获得所有浏览器的 不透明度。

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

警告： 在 Internet Explorer 8 及更低版本中包含用于控制透明度的 Alpha 过滤器会在样式表中创建无效代码，因为这是仅限 Microsoft 的属性，而不是标准 CSS 属性。

CSS 图像不透明度

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

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

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

以下示例演示了 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 透明度不会像 opacity 属性那样影响子元素。RGBA 的 alpha 值会影响单个颜色的透明度，而不是整个元素的透明度。

声明后备颜色

所有浏览器都不支持 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);
}

警告： Internet Explorer 8 及更早版本不支持 RGBA 颜色。他们使用渐变滤镜来实现 RGBA 的效果，这是不推荐使用的。