CSS 透明度与不透明度

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

透明图像

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

opacity 0.2

opacity 0.5

opacity 1(默认)

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性规定元素的透明度。值越低，越透明：</p>
<p>50% 不透明度的图像：</p>
<img src="/znadmin/md/1247/0.jpg" alt="forest" >
</body>
</html>

运行一下

透明悬停效果

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

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：</p>
<img src="/znadmin/md/1247/3.jpg" alt="Northern Lights" width="170" height="170">
<img src="/znadmin/md/1247/4.jpg" alt="Mountains" width="170" height="170">
<img src="/znadmin/md/1247/5.jpg" alt="Italy" width="170" height="170">
</body>
</html>

运行一下

例子解释

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

反向悬停效果的例子：

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  opacity: 0.5;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：</p>
<img src="/znadmin/md/1247/3.jpg" alt="Northern Lights" width="170" height="170">
<img src="/znadmin/md/1247/4.jpg" alt="Mountains" width="170" height="170">
<img src="/znadmin/md/1247/5.jpg" alt="Italy" width="170" height="170">
</body>
</html>

运行一下

透明盒

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

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

实例

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}
div.first {
  opacity: 0.1;
}
div.second {
  opacity: 0.3;
}
div.third {
  opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>使用“不透明度”属性向元素的背景添加透明度时，其所有子元素也将变为透明。这会使完全透明元素中的文本难以读取:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>

运行一下

使用 RGBA 的透明度

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

100% opacity

60% opacity

30% opacity

10% opacity

代码如下：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>Transparent Box</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>注意在使用“不透明度”属性时，文本和背景色是如何变得透明的。</p>
</body>
</html>

运行一下

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

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

提示：您可以在本站的 CSS 颜色这一章中学到有关 RGBA 颜色的更多知识。

透明盒中的文本

这段文本被放置在一个透明框中。

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(/images/klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}
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> 中创建另一个 <div>（class="transbox"）。

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

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

CSS 透明度与不透明度

透明图像

透明悬停效果

例子解释

透明盒

实例

使用 RGBA 的透明度

透明盒中的文本

例子解释

分类导航