CSS 不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。

透明图像

opacity 属性的取值范围为 0.0-1.0。值越低，越透明：

透明悬停效果

opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：

 

透明盒

使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：

使用 RGBA 的透明度

如果不希望对子元素应用不透明度，如上面的例子，使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：

 RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字

透明盒中的文本

首先，我们创建一个带有背景图像和边框的 <div> 元素（class="opacity1"）。

然后，我们在第一个 <div> 中创建另一个 <div>（class="opacity2"）。

<div class="opacity2"> 有背景色和边框 - 这个 div 是透明的。

在透明的 <div> 内，我们在 <p> 元素内添加了一些文本。