CSS 不透明度/透明度

CSS opacity 属性指定元素的不透明度，取值区间 0.0 - 1.0 之间的值。英文中 opacity 是不透明的意思，所以最小值 0 表示完全透明，1 则表示完全不透明。

opacity 的默认值为 1，即完全不透明。

半透明图片

img {
  opacity: 0.5;
}

半透明悬停效果

opacity 属性通常与 :hover 伪类选择器一起使用以达到鼠标悬停时改变不透明度的效果。

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1;
}

半透明元素

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

div {
  opacity: 0.3;
}

使用 RGBA 透明背景色

为了避免上述问题，我们可以使用 RGBA 颜色值为元素设置透明背景。

在 CSS 颜色章节中了解到，可以使用带有 Alpha 通道的 RGB 颜色值(RGB**A**)设置颜色的不透明度。

RGBA 颜色值表示方法为： rgba(red, green, blue, alpha)。 alpha 参数即是不透明度，取值为 0.0（完全透明）和 1.0（完全不透明）之间的数。

div {
  background: rgba(0, 128, 0, 0.3); /* 带有 30% 不透明度的绿色 */
}

实例：透明框中的文本

<html>
  <head>
    <style>
      div.background {
        background: url(klematis.jpg) repeat;
        border: 2px solid black;
      }

      div.transbox {
        margin: 30px;
        background-color: rgba(255, 255, 255, 0.6);
        border: 1px solid black;
      }

      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 class="background"> 中创建另一个 <div class="transbox">。

<div class="transbox"> 有一个半透明的背景色和一个边框。

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