CSS 不透明度/透明度
这 opacity 属性指定元素的不透明度/透明度。
透明图像
这 opacity 属性可以取 0.0 - 1.0 之间的值。值越低，透明度越高：
不透明度 0.2
不透明度 0.5
不透明度 1
（默认）
透明悬停效果
这 opacity property 经常与:hover 选择器在鼠标悬停时更改不透明度：
示例解释
第一个 CSS 块与示例 1 中的代码类似。此外，我们还添加了当用户将鼠标悬停在其中一张图片上时应该发生的情况。在这种情况下，我们希望当用户将鼠标悬停在图片上时，图片不透明。此 CSS 为 opacity:1;.
当鼠标指针移开图像时，图像将再次变得透明。
反向悬停效果的示例：
透明盒
使用时 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, α）。 这 α 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
提示： 您将在我们的CSS 颜色章节.
透明框中的文本
这是放置在透明框中的一些文本。
例子
<html>
<head>
<style>
div.背景{
背景：url（klematis.jpg）重复；
边框：2px 实心黑色；
}
div.transbox {
边距：30px；
背景颜色：#fff；
边框：1px 实心黑色；
不透明度：0.6；
}
div.transbox p {
保证金：5%；
字体粗细：粗体；
颜色：#000；
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>这是放置在透明框中的一些文本。</p>
</div>
</div>
</body>
</html>
亲自尝试 »
示例解释
首先，我们创建一个<div>具有背景图像和边框的元素（class="background"）。
然后我们创建另一个<div> （class="transbox"）在第一个<div> 。
这<div class="transbox">有背景颜色和边框- div 是透明的。
透明内部<div> ，我们在里面添加一些文字<p>元素。
