真正能单独调整背景图透明度的方法只有两种：一是用 background-color 配 rgba() 叠加半透遮罩层，二是用 ::before 伪元素承载背景图并设 opacity；二者均不影响文字清晰度，而直接设 opacity 或 filter 会使整个元素变淡且模糊文字。
背景图片本身不支持 opacity
HTML 元素的 opacity 会影响整个元素（包括子内容），没法只让背景图变透明。直接给 div 加 opacity: 0.5，文字和边框也会跟着发虚——这不是“背景透明”，是“整个盒子半透”。
真正想调背景图透明度，得绕开 opacity，用更可控的方式：
- 用
background-color配rgba()叠一层半透遮罩（推荐，兼容性好） - 用伪元素
::before单独承载背景图并控制其透明度 - 避免用
filter: opacity()，它会模糊文字、触发重绘，且不隔离子元素
用 rgba() 遮罩层最稳妥
本质是：在背景图上盖一层同尺寸、同位置的半透色块。视觉效果等价于“背景图变淡”，但文字完全不受影响。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
background-image和background-color可以共存，后者会叠在前者上方 -
background-color: rgba(255, 255, 255, 0.3)中的0.3就是“遮罩透明度”，数值越小越透、越接近原图 - 如果原图暗，用
rgba(0, 0, 0, 0.2)；亮图则用白底+低 alpha
示例：
div {
background-image: url('photo.jpg');
background-color: rgba(0, 0, 0, 0.25);
background-blend-mode: overlay; /* 可选，增强融合感 */
}伪元素方案更灵活但需注意定位
当需要独立控制背景图透明度（比如 hover 时渐变）、或要叠加多个图层时，伪元素是唯一干净解法。
常见翻车点：
- 忘记给父容器设
position: relative，导致::before脱离定位上下文 - 没写
content: ''，伪元素不会渲染 - 没设
width/height或top/left/bottom/right，伪元素尺寸为 0
最小可用代码：
.bg-container {
position: relative;
}
.bg-container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('photo.jpg');
opacity: 0.6;
z-index: -1;
}别碰 background-opacity 这种不存在的属性
有人搜到过 background-opacity 或 background-alpha，这些不是标准 CSS，浏览器根本不认。Chrome/Firefox/Edge 均无此属性，写了等于白写。
也别试图用 filter: opacity() 作用于背景容器——它会让内部所有内容（文字、图标、子 div）一起变淡，而且在部分安卓 WebView 中有渲染 bug。
真正能落地的，就两条路：rgba 遮罩，或伪元素。前者快、稳、一行可调；后者细、活、适合动效。选哪个，取决于你是否需要单独动画背景图。
透明度值调太低（比如 0.1）时，人眼几乎看不出变化，建议从 0.2 起步，配合真实图片预览调整。
