推荐用伪元素::before承载背景图并设opacity实现图透字不透，需父容器position: relative、伪元素content: ""、inset: 0和z-index: -1；或用background多层叠加rgba蒙层模拟。
不能直接给背景图设透明度，但能通过分层控制让“图变透、字不变”。关键在于把图片从内容流里单独拎出来，让它和文字互不干扰。
用伪元素 ::before 单独承载背景图
这是最推荐、最可控的方式。把图片挪到伪元素上，再对它设 opacity，文字完全不受影响。
- 父容器必须设 position: relative，否则伪元素会相对于 body 定位，容易错位
- 伪元素要写 content: ""，否则不渲染
- 用 top: 0; left: 0; right: 0; bottom: 0 或 inset: 0 铺满全区域
- z-index: -1 确保它垫在文字底下，不遮挡可点击内容
- 透明度直接写在伪元素的 opacity 上，比如 opacity: 0.4
用 background 多层叠加 + rgba() 蒙层
适合纯色遮罩需求，兼容性好（IE9+），写法简洁。原理是在图片上盖一层半透色块，视觉上等效于“图变淡”。
- 写法示例：background: rgba(0, 0, 0, 0.25), url("bg.jpg") no-repeat center/cover;
- rgba 值中的第四个参数是 0–1 的小数，不是百分比（0.25 ≠ 25%）
- 深色图建议用 rgba(0, 0, 0, 0.1–0.3)，浅色图可用 rgba(255, 255, 255, 0.2–0.4)
- 注意：这不是真正改变图片透明度，而是靠颜色混合模拟效果，原图细节不会丢失
绝对别碰的错误写法
这些看似简单，实际会让文字一起发虚，而且很难补救。
- 给整个容器加 opacity: 0.7——子元素无法靠 opacity: 1 拉回来
- background-color: #000; opacity: 0.5 混搭——等于主动把文字也拖进半透明队列
- 对 body 或大容器设 opacity 再加 background-image——所有链接、按钮、输入框全变灰
- 用 filter: opacity() 或 background-blend-mode——行为难预测，旧版 Safari 易出锯齿
进阶提示：滚动与固定定位场景
如果背景图要随滚动固定（比如视差或全屏 Banner），记得把伪元素挂在 html 上，或加 background-attachment: fixed；若伪元素用于固定导航栏，需检查轮播图等下方容器的 z-index，避免 touch 事件被拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
