CSS opacity 透明度
opacity 属性可以用来设置元素的是否透明以及透明度效果。本章节通过一些具体示例让你了解如何在CSS中使用opacity来设置元素的是否透明效果。
图像透明度设置
opacity 属性的取值范围为 0.0-1.0，值越低，元素越透明。
opacity 0.2
opacity 0.5
opacity 1
示例
img {
opacity: 0.5;
}
透明悬停效果
opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：
示例
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
示例说明
第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。
当鼠标指针离开图像时，图像将再次透明。
反向悬停效果的例子：
透明盒子
使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：
div {
opacity: 0.3;
}
使用 RGBA 的透明度
如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：
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/tech/courses/59546.html