CSS 不透明度 / 透明度

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

透明图像

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

coffee coffee coffee
opacity 0.2 opacity 0.5 opacity 1

实例

  1. img {
  2.   opacity: 0.5;
  3. }

css_image_opacity.htm

透明悬停效果

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

实例

  1. img {
  2.   opacity: 0.5;
  3. }
  5. img:hover {
  6.   opacity: 1.0;
  7. }

css_image_transparency_1.htm

例子解释

第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。

当鼠标指针离开图像时，图像将再次透明。

反向悬停效果的例子：

实例

  1. img:hover {
  2.   opacity: 0.5;
  3. }

css_image_transparency_2.htm

透明盒

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

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

实例

  1. div {
  2.   opacity: 0.3;
  3. }

css_opacity_box_1.htm

使用 RGBA 的透明度

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

100% opacity
60% opacity
30% opacity
10% opacity

您已经从我们的 CSS 颜色 这一章中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道（RGBA）一起使用 - 该通道规定颜色的不透明度。

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

提示：您将在我们的 CSS 颜色 这一章中学到有关 RGBA 颜色的更多知识。

实例

  1. div {
  2.   background: rgba(76, 175, 80, 0.3) /* 不透明度为 30% 的绿色背景 */
  3. }

css_opacity_box_2.htm

透明盒中的文本

实例

  1. <html>
  2. <head>
  3. <style>
  4. div.background {
  5.   background: url(klematis.jpg) repeat;
  6.   border: 2px solid black;
  7. }
  9. div.transbox {
  10.   margin: 30px;
  11.   background-color: #ffffff;
  12.   border: 1px solid black;
  13.   opacity: 0.6;
  14. }
  16. div.transbox p {
  17.   margin: 5%;
  18.   font-weight: bold;
  19.   color: #000000;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <div class="background">
  26.   <div class="transbox">
  27.     <p>这是一些位于透明框中的文本。</p>
  28.   </div>
  29. </div>
  31. </body>
  32. </html>

css_transparency.htm

例子解释

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

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

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

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