CSS 透明度
opacity 属性指定元素的透明度。
透明图片
opacity 属性可以取值为 0.0 到 1.0 之间的数字。值越低，透明度越高。
透明度 0.2
透明度 0.5
透明度 1
(默认)
透明悬停效果
opacity 属性经常与 :hover 选择器一起使用，用于在鼠标悬停时改变透明度。
示例解释
第一个 CSS 代码块与示例 1 中的代码类似。此外，我们还添加了当用户将鼠标悬停在图像上时应该发生的事情。在这种情况下，我们希望当用户将鼠标悬停在图像上时，图像不透明。相应的 CSS 代码为 opacity:1;。
当鼠标指针移开图像时，图像将再次变得透明。
反向悬停效果的示例
透明盒子
当使用 opacity 属性为元素的背景添加透明度时，其所有子元素会继承相同的透明度。这会导致完全透明元素中的文本难以阅读。
透明度 1
透明度 0.6
透明度 0.3
透明度 0.1
使用 RGBA 实现透明度
如果您不想将透明度应用于子元素（如上面的示例），请使用 **RGBA** 颜色值。以下示例设置了背景颜色的透明度，而不是文本。
100% 透明度
60% 透明度
30% 透明度
10% 透明度
您在我们的 CSS 颜色章节 中了解到，您可以使用 RGB 作为颜色值。除了 RGB，您还可以使用带有 alpha 通道的 RGB 颜色值 (RGBA)，它指定颜色的透明度。
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"）。
然后我们在第一个 `
