不透明度
opacity 0~1、rgba 透明背景、hover 透明效果
不透明度
opacity 让整个元素变透明——包括其子元素。用 rgba 可以只透明背景。
学完本章你将： 掌握 opacity 0~1、rgba 透明背景、hover 效果。
opacity
css
.opaque { opacity: 1; } /* 完全不透明（默认） */
.half { opacity: 0.5; } /* 半透明 */
.transparent { opacity: 0; } /* 完全透明（还占空间） */opacity vs rgba
css
/* opacity：元素整体透明——文字也变透明了 */
.opacity-box {
background: red;
opacity: 0.5; /* 红底+文字都半透明 */
}
/* rgba：只有背景透明——文字不变 */
.rgba-box {
background: rgba(255, 0, 0, 0.5); /* 半透明红底 */
/* 文字完全清晰 */
}hover 透明效果
css
.image-container {
position: relative;
}
.image-container img {
opacity: 1;
transition: opacity 0.3s;
}
.image-container:hover img {
opacity: 0.7; /* 悬停时变淡 */
}