CSS 不透明度 / 透明度
opacity 属性指定了元素的可见性/透明度。
透明图像
opacity 属性可以接受 0.0 - 1.0 之间的值。值越低，透明度越高。
opacity 0.2
opacity 0.5
opacity 1
(默认)
鼠标悬停时的透明效果
opacity 属性经常与 :hover 选择器一起使用，以便在鼠标悬停时改变不透明度。
示例说明
第一个 CSS 块与示例 1 中的代码相似。此外，我们还添加了当用户将鼠标悬停在图像上时会发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。对应的 CSS 是 opacity:1;。
当鼠标指针移开图像时，图像将再次变得透明。
反向悬停效果的示例
透明框
当使用 opacity 属性为元素的背景添加透明度时，其所有子元素都会继承相同的透明度。这会使完全透明元素内的文本难以阅读。
opacity 1
不透明度 0.6
不透明度 0.3
不透明度 0.1
使用 RGBA 实现透明度
如果您不想像上面示例那样将不透明度应用于子元素，请使用 **RGBA** 颜色值。以下示例为背景颜色设置了不透明度，但不对文本设置。
100% 不透明度
60% 不透明度
30% 不透明度
10% 不透明度
您已从我们的 CSS 颜色章节中学到，可以使用 RGB 作为颜色值。除了 RGB，您还可以使用带有 alpha 通道（RGBA）的 RGB 颜色值 - 这会为颜色指定不透明度。
RGBA 颜色值指定格式为：rgba(red, green, blue, alpha)。alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
提示：您将在我们的 CSS 颜色章节中了解更多关于 RGBA 颜色的信息。
透明框内的文本
这是放置在透明框内的一些文本。
示例
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
}div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
}div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>这是放置在透明框内的一些文本。</p>
</div>
</div>
</body>
</html>
自己动手试一试 »
示例说明
首先，我们创建一个具有背景图像和边框的 <div> 元素（class="background"）。
然后，我们在第一个 <div> 中创建另一个 <div>（class="transbox"）。
class="transbox" 的 <div> 具有背景颜色和边框 - 该 div 是透明的。
在透明的 <div> 内部，我们在 <p> 元素中添加一些文本。
