CSS 透明度
03-css2026/11/14
透明度（opacity） 表示元素的 不透明程度，取值范围 0~1：
- 0 → 完全透明
- 1 → 完全不透明（默认值）
- 小数 → 半透明
opacity 属性
基本用法
opacity 属性设置元素的整体透明度，包括其所有内容（文本、背景、边框等）。
.element {
opacity: 0.5; /* 50% 透明度 */
}
RGBA 和 HSLA 颜色
1. RGBA - 红绿蓝+透明度
.element {
background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
color: rgba(0, 0, 0, 0.8); /* 80% 不透明黑色文字 */
border: 2px solid rgba(0, 0, 0, 0.3); /* 透明边框 */
}
2. HSLA - 色相饱和度亮度+透明度
.element {
background-color: hsla(120, 100%, 50%, 0.5); /* 半透明绿色 */
color: hsla(0, 0%, 0%, 0.8); /* 80% 不透明黑色 */
}
RGBA/HSLA vs Opacity 对比：
<div class="comparison">
<div class="box opacity-box">
<p>使用 opacity</p>
<span>文字也透明</span>
</div>
<div class="box rgba-box">
<p>使用 RGBA</p>
<span>只有背景透明</span>
</div>
</div>
.comparison {
display: flex;
gap: 20px;
padding: 20px;
background: #f8f9fa;
}
.box {
width: 200px;
height: 150px;
padding: 20px;
border: 2px solid #333;
border-radius: 8px;
}
.opacity-box {
opacity: 0.5; /* 整个元素包括文字都透明 */
background: #e74c3c;
}
.rgba-box {
background: rgba(231, 76, 60, 0.5); /* 只有背景透明 */
border: 2px solid rgba(0, 0, 0, 0.3); /* 边框也透明 */
}
/* 文字保持不透明 */
.rgba-box p,
.rgba-box span {
color: #000; /* 文字完全不透明 */
}
透明度与过渡动画
.fade {
opacity: 0;
transition: opacity 0.3s;
}
.fade.show {
opacity: 1;
}
实用场景示例
场景 1：图片悬停效果
<div class="image-container">
<img src="landscape.jpg" alt="风景" />
<div class="image-overlay">
<h3>美丽的风景</h3>
</div>
</div>
.image-container {
position: relative;
display: inline-block;
overflow: hidden;
border-radius: 8px;
}
.image-container img {
width: 300px;
height: 200px;
object-fit: cover;
transition: opacity 0.3s ease;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover img {
opacity: 0.8;
}
.image-container:hover .image-overlay {
opacity: 1;
}