最稳妥方案是用position: relative包裹父容器并配合::after伪元素叠加半透明白色层，需设content: ""、inset: 0（或四方向定位）、background-color: rgba(255,255,255,0.6)及合理z-index配对。
用 CSS 伪元素叠加半透明白色层最稳妥
直接给 <img> 加 background-color 是无效的——<img> 是替换元素，背景不会显示在图片内容下方。必须用容器包裹再叠加图层。
推荐用 position: relative 包裹父容器 + ::after 伪元素实现，兼容性好、不污染 DOM、语义干净：
<div class="img-with-overlay"> <img src="photo.jpg" alt="示例"> </div>
.img-with-overlay {
position: relative;
display: inline-block; /* 或 block，按需 */
}
.img-with-overlay::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.6); /* 白色 + 60% 不透明度 */
z-index: 1;
}
.img-with-overlay img {
display: block;
z-index: 0;
}-
z-index必须配对使用：伪元素设为1，<img>设为0（或不设，但需确保它不脱离文档流） - 如果图片本身带透明区域（如 PNG），叠加层会透出原图透明部分，这是预期行为；若想遮盖全部，确保
rgba()的 alpha 值足够高（比如0.7以上） - 不要用
opacity替代rgba()：它会让整个图片变透明，而不仅是背景层
Flex 容器内居中叠加时注意尺寸继承
当图片放在 display: flex 容器中且需要水平/垂直居中时，伪元素可能无法自动撑满父容器——因为 flex 项默认不拉伸，position: absolute 的参照是父容器的 padding box，而非 content box。
解决方法：显式设置父容器宽高，或改用 grid 布局更可控：
立即学习“前端免费学习笔记（深入）”；
.img-grid-container {
display: grid;
place-items: center;
width: 300px;
height: 200px;
}
.img-grid-container::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255,255,255,0.5);
z-index: 1;
}-
inset: 0是top:0; right:0; bottom:0; left:0的简写，更简洁 - 若父容器没有固定尺寸，又依赖内容自适应，优先用
inline-block+position: relative方案，避免 flex/grid 的隐式尺寸限制
IE11 兼容要避开 inset 和 place-items
IE11 不支持 inset 和 place-items，但支持 rgba() 和 ::after。只需把现代写法降级即可：
.ie11-safe-overlay::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: #fff;
opacity: 0.6; /* IE11 支持 opacity，但不推荐用于 img 父级 */
}- 这里用
opacity是安全的，因为作用在伪元素上，不影响图片本身 - 避免对包含
<img>的容器整体设opacity，否则图片也会变淡 - IE11 不支持
rgba()在某些旧滤镜上下文中，但直接用于background-color是 OK 的
用 <picture> 或响应式图片时别漏掉容器
如果用了 <picture>、srcset 或 <img> 的 loading="lazy"，仍需一个包裹容器来承载伪元素层——不能把伪元素加在 <picture> 上，因为它的子元素是多个 <source> 和一个 <img>，结构不可控。
- 始终用额外的
<div>包一层，哪怕只是语义空容器 - 不要试图给
<source>加样式：它不渲染，无盒模型 - 懒加载图片首次加载完成前，伪元素层会先显示空白，属正常现象；如需占位，可在容器上加
min-height
实际项目里最容易被忽略的是伪元素的 z-index 层级和父容器的 position 值是否匹配——少一个 relative，整个层就飘到页面顶部去了。
