码农教程 - 一技在手,衣食无忧! tools

目录

CSS 不透明度/透明度

❮ 上一节 下一节 ❯

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

透明图片

这个opacity属性可以取 0.0 - 1.0 之间的值。值越低，越透明：

Forest

不透明度0.2

Forest

不透明度0.5

Forest

不透明度 1
（默认）

示例

img {
  opacity: 0.5;
}
亲自试一试 »

透明悬停效果

这个opacity属性经常与:hover选择器更改鼠标悬停时的不透明度：

Northern Lights
Mountains
Italy

示例

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
亲自试一试 »

示例解释

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

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

反向悬停效果的示例：

Northern Lights
Mountains
Italy

示例

img:hover {
  opacity: 0.5;
}
亲自试一试 »

透明盒

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

不透明度 1

不透明度0.6

不透明度0.3

不透明度0.1

示例

div {
  opacity: 0.3;
}
亲自试一试 »

使用 RGBA 的透明度

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

100% 不透明度

60% 不透明度

30% 不透明度

10% 不透明度

你从我们那里学到了CSS 颜色章节，您可以使用 RGB 作为颜色值。除了 RGB 之外，您还可以使用带有 Alpha 通道 (RGBA) 的 RGB 颜色值 - 它指定颜色的不透明度。

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

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

示例

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

透明框中的文本

这是放置在透明框中的一些文本。

示例

<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> 元素内添加一些文本。

通过练习测试一下

练习:

使用 CSS 将图片的透明度设置为 50%。

<style>
img {
  : ;
}
</style>

<body>
  <img src="klematis.jpg" width="150" height="113">
</body>

开始练习


❮ 上一节 下一节 ❯