CSS 透明属性
在 CSS 中，我们可以使用 opacity 属性来定义元素的透明效果。
语法：
opacity: 数值 ;说明：
需要清楚的是，opacity 设置的是 “不透明度”，而不是 “透明度”。opacity 属性取值是一个数值，取值范围为 0.0~1.0。其中 0.0 表示完全透明，1.0 表示完全不透明。
注意:
- 使用 opacity 时，该元素的背景及其后代元素都会受到影响。
- opacity 会作用于整个元素及其所有子元素，且子元素无法通过设置 opacity: 1 来抵消父元素的透明效果。
- 除了 opacity 属性，还有一个 opacity() 函数。
CSS 透明示例
在实际项目开发中，opacity 属性通常用于创建元素的淡入淡出动画效果。接下来，我们来看几个简单的例子。
示例 1：CSS 定义图片的透明效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img:nth-of-type(1) {
opacity: 1.0; /* 完全不透明 */
}
img:nth-of-type(2) {
opacity: 0.5; /* 半透明 */
}
img:nth-of-type(3) {
opacity: 0.2; /* 几乎透明 */
}
</style>
</head>
<body>
<img src="imgs/frog.jpg" alt="">
<img src="imgs/frog.jpg" alt="">
<img src="imgs/frog.jpg" alt="">
</body>
</html>页面效果如下图所示。
示例 2：CSS 定义鼠标 :hover 时的透明效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #50A3A6;
color: white;
border-radius: 5px;
cursor: pointer;
}
div:hover {
opacity: 0.8; /* 鼠标悬停时，稍微透明 */
}
</style>
</head>
<body>
<div>回到首页</div>
</body>
</html>默认情况下，效果如下图 1 所示。当鼠标移到元素上时，效果如下图 2 所示。
分析：
除了 opacity 属性，我们还可以使用以下两种函数来实现元素的透明效果：
- rgba()：rgba() 函数允许你设置元素的红、绿、蓝颜色以及透明度。比如 background-color: rgba(255, 0, 0, 0.5); 表示红色背景，透明度为 0.5。
- hsla()：hsla() 函数与 rgba() 类似，但它使用色相、饱和度、亮度以及透明度来定义颜色。比如 color: hsla(120, 100%, 50%, 0.3); 表示绿色文字，透明度为 0.3。
rgba() 和 hsla() 与 opacity 的区别在于：rgba() 和 hsla() 只会影响指定属性的透明度，而不会影响元素的后代元素。
