引言
CSS 透明度属性
CSS 中用于设置透明度的属性主要有两个：opacity 和 rgba。
1. opacity 属性
img {
opacity: 0.5;
}
2. rgba 属性
background: rgba(0, 0, 0, 0.5);
实例分享
实例 1：创建透明图像
首先，我们将展示如何通过 CSS 创建一个透明图像。
<img src="example.jpg" alt="Example Image" style="opacity: 0.4;">
在这个例子中，图像的透明度被设置为 40%，即半透明效果。
实例 2：图像透明度 - 悬停效果
接下来，我们将创建一个悬停效果，当鼠标指针移动到图像上时，图像的透明度会变为 100%。
<img src="example.jpg" alt="Example Image" style="opacity: 0.4;" onmouseover="this.style.opacity='1.0'" onmouseout="this.style.opacity='0.4'">
在这个例子中，当鼠标悬停在图像上时，onmouseover 事件会将透明度设置为 100%，而当鼠标移开时，onmouseout 事件会将透明度恢复为 40%。
实例 3：文本在背景图像上的透明框
有时候，我们可能需要在背景图像上创建一个透明的框来显示文本。这可以通过设置 rgba 背景色来实现。
<div style="background: rgba(255, 255, 255, 0.8); padding: 20px;">
这是背景图像上的透明框文本。
</div>
在这个例子中，rgba 背景色的透明度为 80%，即半透明效果，使得文本在背景图像上清晰可见。