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 滤镜从接受 0100 的值。值 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 制作透明图像。

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

100% Opaque Image 50% Opaque Image 25% Opaque Image
opacity:1 opacity:0.5 opacity:0.25

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

以下示例演示了 CSS 图像不透明度的常见用法,其中当用户将鼠标指针移动到图像上时图像的不透明度会发生变化。

100% Opaque Image 50% Opaque Image 25% Opaque Image
opacity:1 opacity:0.5 opacity:0.25

- 将鼠标指针移到图像上以查看效果。

透明框中的文本

在元素上使用不透明度时,不仅是具有透明度的元素的背景,而且其所有子元素也变得透明。如果不透明度的值变得更高,则使透明元素内的文本难以阅读。

OPACITY OPACITY OPACITY OPACITY

为了防止这种情况,你可以使用透明的 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
\- 或单独保留文本颜色并仅更改背景的透明度。
RGBA RGBA 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 的效果,这是不推荐使用的。