文章目录
- CSS 不透明度/透明度opacity
- 透明悬停效果
- 透明框
- 使用 RGBA 实现透明度
- 透明框中的文本
- 总结
CSS 不透明度/透明度opacity
不透明度属性opacity指定元素的不透明度/透明度。
不透明度opacity属性可以取 0.0 - 1.0 之间的值。值越低，透明度越高：
示例
img {
opacity：0.5;
}
透明悬停效果
不透明度属性通常与 :hover 选择器一起使用，以更改鼠标悬停时的不透明度：
示例
img {
opacity：0.5;
}
img：hover {
opacity：1.0;
}
示例说明
第一个 CSS 块与示例 1 中的代码类似。此外，我们还添加了当用户将鼠标悬停在其中一张图片上时应该发生的情况。在这种情况下，我们希望当用户将鼠标悬停在图片上时，图片不透明。此 CSS 为 opacity:1;。当鼠标指针移开图片时，图片将再次透明。
反向悬停效果的示例：
示例
img:hover {
opacity: 0.5;
}
透明框
当使用 opacity 属性为元素的背景添加透明度时，其所有子元素都会继承相同的透明度。这会使完全透明元素内的文本难以阅读：
示例
div {
opacity: 0.3;
}
使用 RGBA 实现透明度
如果您不想将不透明度应用于子元素（如上例所示），请使用 RGBA 颜色值。以下示例设置背景颜色的不透明度，而不是文本的不透明度：
可以使用 RGB 作为颜色值。除了 RGB，您还可以使用带有 alpha 通道 (RGBA) 的 RGB 颜色值 - 它指定颜色的不透明度。
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
示例
div {
background: rgba(76, 175, 80, 0.3) /* 不透明度为 30% 的绿色背景 */
}
透明框中的文本
这是放置在透明框中的一些文本。
示例
<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>
总结
本文介绍了的CSS不透明度opacity/transparency使用，如有问题欢迎私信和评论
