CSS opacity 透明度

CSS opacity 透明度

opacity 属性可以用来设置元素的是否透明以及透明度效果。本章节通过一些具体示例让你了解如何在CSS中使用opacity来设置元素的是否透明效果。

图像透明度设置

opacity 属性的取值范围为 0.0-1.0,值越低,元素越透明。

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

示例

img {
  opacity: 0.5;
}

试一试

透明悬停效果

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

Flower
Flower
Flower

示例

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

试一试

示例说明

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

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

反向悬停效果的例子:

Tulip
Tulip
Tulip

透明盒子

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

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
div {
  opacity: 0.3;
}

使用 RGBA 的透明度

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

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

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

示例

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>这是一些位于透明框中的文本。</p>
  </div>
</div>

</body>
</html>

试一试

示例说明

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

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

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

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

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/59546.html

(0)
上一篇 2021年8月9日
下一篇 2021年8月9日

相关推荐

发表回复

登录后才能评论