CSS 图像透明/不透明

透明度能让图片、色块与背景自然融合，做出水印、悬停高亮、层叠文字等效果。CSS 中用 opacity 控制元素的整体透明度，配合 hover 就能做出生动的交互。讲师带你看懂 opacity 的用法与陷阱。

opacity 基础用法

opacity 取值 0~1：0 完全透明，1 完全不透明（默认）：

img { opacity: 0.5; }   /* 半透明图片 */

<img src="logo.png" style="opacity: 0.3;" alt="半透明logo">

运行效果：图片看起来像蒙了一层纱，背后的背景隐约透出，适合做水印或占位图。

悬停时改变透明度

常见的交互：默认半透明，鼠标移入立刻变清晰：

img {
  opacity: 0.4;
  transition: opacity 0.3s;  /* 平滑变化 */
}
img:hover {
  opacity: 1.0;              /* 悬停时完全不透明 */
}

/* 反过来：平时不透明，悬停时半透明 */
img:hover { opacity: 0.7; }

运行效果：图片以 0.3 秒从半透明平滑变为清晰（或反之），比瞬间切换柔和得多。

透明度的陷阱：子元素一起透明

opacity 作用于"整个元素及其所有后代"：如果父容器设了 opacity:0.5，里面的文字和图片都会一起变透明，且无法单独"救回"：

.box { opacity: 0.5; }   /* 里面的文字也会变淡 */
.box-text { opacity: 1; }/* 无效：父级已经叠了透明度 */

解决办法：背景透明用 rgba 颜色，文字保持不透明：

.box {
  background: rgba(0, 0, 0, 0.5);  /* 只让背景半透明 */
  color: #fff;
}

运行效果：深色半透明背景压在图片上，白字依然清晰，这正是图片上叠加文字的推荐做法。

半透明遮罩上的文字

给图片容器叠一层半透明遮罩，是"图片配文字"的经典设计：

.photo { position: relative; width: 400px; }
.photo .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);  /* 黑色遮罩，40% 不透明 */
  color: #fff;
  display: flex;
  align-items: center;      /* 文字水平居中 */
  justify-content: center;  /* 文字垂直居中 */
}

<div class="photo">
  <img src="scenery.jpg" width="400" alt="风景">
  <div class="mask">远山如黛</div>
</div>

运行效果：图片上蒙了一层淡淡的黑色，白色文字浮在正中央，可读性很好——透明度让两层内容各司其职。

小结

opacity 以 0~1 控制整个元素（含子元素）的透明度，适合整图淡入淡出与 hover 反馈；只希望背景透明时请改用 rgba。想让文字稳稳压在图片上，半透明遮罩层是最实用的一招。