应使用伪元素::before或background-blend-mode控制背景图透出程度，而非直接设置opacity，避免影响文字和子元素；伪元素法兼容性好、定位精准，blend-mode更轻量但兼容性较差。
background-image 本身不支持 opacity
直接给元素加 opacity 会让整个元素（包括文字、子节点）都变透明，不是只调背景图的不透明度。这是最常踩的坑——你以为在调背景，其实把按钮和文字也一起搞模糊了。
真正想控制的，是「背景图的透出程度」，比如让深色图不压住浅色文字。得换思路：用伪元素或额外容器隔离背景层。
用 ::before 伪元素叠加半透明背景图
这是最干净、无需改 HTML 结构的做法。核心是把背景图抽到 ::before 上，再单独设 opacity 或 rgba() 背景色混合。
- 给目标元素设
position: relative，确保伪元素能定位覆盖 -
::before设content: ""、position: absolute、铺满宽高 - 背景图设在伪元素上，再用
opacity: 0.6或background-color: rgba(0,0,0,0.3)叠加调光
div.hero {
position: relative;
color: white;
}
div.hero::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("bg.jpg");
background-size: cover;
opacity: 0.7;
z-index: -1;
}
用 background-blend-mode 混合纯色与图片
如果只需要轻微压暗/提亮背景图（比如让文字更易读），background-blend-mode 是更轻量的选择，不用额外 DOM 或定位。
立即学习“前端免费学习笔记（深入）”；
jQuery图片背景墙聚光灯效果代码，鼠标悬停在某张图片上时，该图片变亮，其他图片变暗。兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、head区域引用文件lrtk.css及jquery 2、在文件中加入区域代码 3、复制images文件夹里的图片到相应的路径 4、修改图片的透明度，opacity :
它要求至少两个背景层：一张图 + 一个纯色层（如 linear-gradient 或 rgba()），然后靠混合模式控制叠加效果。
- 支持的值里，
multiply压暗，screen提亮，overlay更自然 - 注意浏览器兼容性：
IE完全不支持，Safari旧版本有 bug - 不能精确控制“透明度百分比”，效果偏定性，适合快速微调
div.card {
background:
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url("photo.jpg");
background-blend-mode: overlay;
}
别碰 filter: opacity() 给背景图用
filter: opacity() 看似能局部生效，但实际会触发整个元素的渲染层提升，导致 z-index 行为异常、滚动卡顿、甚至遮挡下层 fixed 元素——尤其在移动端很常见。
除非你明确需要同时模糊文字+背景，并接受性能折损，否则这不是“调背景透明度”，只是偷懒的副作用。
- 它作用于整个渲染树，不是 CSS 层级的样式隔离
- 和
transform、will-change一起用时容易触发意外重绘 - 若真要用，务必加
backface-visibility: hidden缓解部分问题
真正要调的从来不是“背景图的透明度”，而是「背景图对内容可读性的干扰程度」。选伪元素还是 blend-mode，取决于你要不要保留原生背景定位能力、支不支持老浏览器、以及有没有动态切换需求——这些细节比 opacity 数值重要得多。
