CSS 图像透明/不透明

在 CSS 中控制「透明/不透明」主要有两种方式：opacity（整块元素一起透明）和透明颜色（如 rgba、hsla），只让背景或文字透明，其它内容不受影响。

1. opacity（不透明度）

• opacity 取值 0～1：0 完全透明，1 完全不透明。
• 作用于整个元素（包括其子元素和文字），子元素无法再「比父元素更不透明」。

img {
  opacity: 0.8;
}

.box {
  opacity: 0.5;  /* 整块半透明，文字也会变淡 */
}

悬停时改变透明度（常用于图片、按钮）：

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img:hover {
  opacity: 0.7;
}

---

2. 透明颜色：rgba / hsla

若只想让背景或文字透明，而不影响整块元素，应使用带透明度的颜色，而不是 opacity。

rgba

• rgba(r, g, b, a)：a 为 0～1，0 完全透明，1 不透明。

.box {
  background-color: rgba(0, 0, 0, 0.5);  /* 半透明黑底 */
}

.text {
  color: rgba(255, 255, 255, 0.8);
}

hsla

• hsla(h, s%, l%, a)：色相、饱和度、明度、透明度。

.card {
  background: hsla(200, 60%, 50%, 0.3);
}

十六进制 8 位（现代浏览器）

• #rrggbbaa：最后两位是透明度（00～ff）。例如 #00000080 为半透明黑。

.bg {
  background-color: #00000080;
}

---

对比小结

方式	作用范围	适用场景
opacity	整个元素（含子元素）	整块淡入淡出、图片悬停变淡
rgba / hsla / #rrggbbaa	仅该颜色	背景透明、文字半透明、边框透明

---

小结

• opacity: 0～1 控制整块元素透明度；悬停常用 opacity + transition。
• 只让背景/文字透明用 rgba、hsla 或 #rrggbbaa，不影响其它内容。
• 图片廊、按钮等「整块变淡」用 opacity；遮罩、卡片底用 rgba 更合适。

下一节学习 CSS 图像拼合技术。