实现背景图半透明需用rgba()遮罩或伪元素控opacity：前者在同元素设background-image与background-color:rgba()，后者用::before绝对定位加opacity；禁用容器级opacity以免内容变透。
HTML 本身没有直接让 background-image 半透明的属性；所谓“背景图半透明”，实际是通过控制「背景图所在元素的背景层」中「颜色或遮罩层」的透明度来实现视觉效果，图片本身始终不透明。
用 background-color + rgba() 叠加遮罩层
最常用、兼容性好、语义清晰的方式：在同一个元素上同时设置 background-image 和带透明度的 background-color（用 rgba()），利用层叠顺序让颜色层盖在图片上，形成“压暗/提亮+半透”效果。
-
background-color: rgba(0, 0, 0, 0.4)表示一层黑色遮罩，不透明度 40%，能透出底图纹理 - 必须把
background-color写在background-image之后，否则会被覆盖（CSS 层叠规则） - 注意：该方法对图片本身无影响，只改变视觉混合效果；若需局部透明（如文字区域），需额外用伪元素或子容器
div.hero {
background-image: url('scene.jpg');
background-color: rgba(255, 255, 255, 0.1); /* 白色微透，提亮底图 */
background-blend-mode: overlay; /* 可选：增强融合感 */
}
用 ::before 伪元素单独控制遮罩透明度
当需要精细控制遮罩位置、大小或动画时，把图片和遮罩拆成两层——图片设为父容器背景，遮罩用伪元素覆盖，其 opacity 可独立调节。
- 伪元素必须设
content: ''、position: absolute，并撑满父容器 - 父容器需设
position: relative，否则伪元素会相对 body 定位 - 遮罩层用
background-color即可，无需图片；opacity: 0.3直接生效，比rgba()更直观
.hero {
position: relative;
background-image: url('mountain.jpg');
height: 400px;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #000;
opacity: 0.25;
}
别误用 opacity 直接作用于容器
给整个容器设 opacity: 0.7 看似简单，但会导致**内容（文字、按钮等）也变透明**，违背“只要背景图半透明”的原始需求。
- 这是初学者最常踩的坑：视觉上图变淡了，但文字也模糊了，可读性崩坏
-
opacity是作用于整个渲染树的，不可逆，子元素无法通过opacity: 1恢复不透明 - 除非你明确需要整块区域（含文字）一起淡入淡出，否则不要用
background-blend-mode 配合纯色背景做动态融合
如果背景图是固定风格（如深色夜景），可搭配纯色背景与混合模式，实现更自然的“通透感”，比如让白色文字在图上更易读。
- 支持的值如
multiply（加深）、screen（提亮）、overlay（增强对比） - 必须配合非透明的
background-color才有效，单图无效 - IE 不支持，现代浏览器可用；调试时建议先用 DevTools 实时切换模式观察效果
section.banner {
background-image: url('clouds.jpg');
background-color: #6a11cb; /* 渐变紫底色 */
background-blend-mode: soft-light;
}
真正要实现“背景图半透明”，核心就两条：要么用 rgba() 遮罩层叠，要么用伪元素独立控 opacity；所有其他写法，不是副作用太大，就是根本没动到背景图的显示逻辑。细节上，background-blend-mode 能提升质感，但别指望它替代透明度控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
