HTML CSS opacity 不透明度 / 透明度属性

HTML CSS 不透明度 / 透明度 opacity 属性可以让指定元素的不透明度或者透明度。

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

img {
  opacity: 0.5;
}

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

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道（RGBA）一起使用 – 该通道规定颜色的不透明度。
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
<h1>透明框</h1>
<p>使用 opacity：</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p>使用 RGBA 颜色值：</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>注意使用 opacity 属性时文本以及背景颜色如何变得透明。</p>

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！