CSS 图像不透明度/透明度


目录

    显示目录


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


透明图像

opacity 属性可以采用 0.0 - 1.0 之间的值。值越低,越透明:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

例子

img {
  opacity: 0.5;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>



透明悬停效果

opacity 属性通常与 :hover 选择器一起使用来更改鼠标悬停时的不透明度:

Northern Lights
Mountains
Italy

例子

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>


示例解释

第一个 CSS 块与示例 1 中的代码类似。此外,我们还添加了当用户将鼠标悬停在其中一个图像上时应该发生的情况。在这种情况下,我们希望当用户将鼠标悬停在图像上时图像不透明。其 CSS 为 opacity:1;

当鼠标指针移离图像时,图像将再次变为透明。

反向悬停效果的示例:

Northern Lights
Mountains
Italy

例子

img:hover {
  opacity: 0.5;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>




透明盒

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

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

例子

div {
  opacity: 0.3;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #04AA6D;
  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>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</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

您从 CSS 颜色章节中了解到,您可以使用 RGB 作为颜色值。除了RGB之外, 您可以使用带有 Alpha 通道 (RGBA) 的 RGB 颜色值 - 它指定颜色的不透明度。

RGBA 颜色值通过以下方式指定:rgba(red, green, blue, alpha)。这 alpha 参数是 0.0(完全透明)和 1.0(完全不透明)之间的数字。

提示:您将在我们的 CSS 颜色章节中了解有关 RGBA 颜色的更多信息。

例子

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% 
opacity */
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(4, 170, 109);
  padding: 10px;
}

div.first {
  background: rgba(4, 170, 109, 0.1);
}

div.second {
  background: rgba(4, 170, 109, 0.3);
}

div.third {
  background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>With 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>With RGBA color values:</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>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>



透明框中的文本

This is some text that is placed in the transparent box.

例子

<html>
<head>
<style>
div.background {
    background: url(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>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(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>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>


示例解释

首先,我们创建一个带有背景图像和边框的 <div> 元素 (class="background")。

然后我们在第一个 <div> 内创建另一个 <div> (class="transbox")。

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

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