CSS 透明度
opacity CSS 属性指定元素的透明度。
所有浏览器的不透明度
不透明度现在是 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 filter"来控制元素的透明度。
p {
filter: alpha(opacity=50);
zoom: 1; /* Fix for IE7 */
}注意： IE 中的 Alpha 过滤器接受从 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 filter 来控制透明度会在您的样式表中创建无效代码，因为这是 Microsoft 独有的属性，而不是标准 CSS 属性 .
CSS 图像不透明度
您还可以使用 CSS Opacity 制作透明图像。
下图中的三幅图像均来自同一个源图像。 它们之间的唯一区别是它们的不透明度。
 |
|
|
不透明度:1 |
不透明度:0.5 |
不透明度:0.25 |
在鼠标悬停时更改图像不透明度
以下示例演示了 CSS 图像不透明度的常见用法，当用户将鼠标指针移到图像上时，图像的不透明度会发生变化。
 |
 |
 |
— 将鼠标指针移到图像上以查看效果。
透明框中的文字
在元素上使用不透明度时，不仅元素的背景将具有透明度，而且其所有子元素也将变得透明。 如果不透明度值变得更高，它会使透明元素内的文本难以阅读。
| OPACITY | OPACITY | OPACITY | OPACITY |
为了防止这种情况，您可以使用透明的 PNG 图像，或者将文本块放在透明框之外，并使用负 margin 或 CSS positioning 将其视觉推入内部。
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 代表红蓝绿阿尔法。
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 {
/* 不支持 RGBA 的 Web 浏览器的后备方案 */
background: rgb(0, 0, 0);
/* 不透明度为 0.5 的 RGBa */
background: rgba(0, 0, 0, 0.5);
}警告： Internet Explorer 8 及更早版本不支持 RGBA 颜色。 他们使用 gradient filter 来实现已弃用的 RGBA 效果。