HTML无法直接设置背景图片透明度，需用CSS多层背景叠加rgba色块或::before伪元素隔离图层；前者兼容性好，后者精准控制且不影响子元素。
HTML 本身没有直接设置背景图片透明度的属性；background-image 不接受透明度控制，opacity 会连带影响整个元素及其子内容。真正可行的方案是用 CSS 的 background 叠加层 + rgba() 或伪元素隔离。
用 background 多层叠加 + 半透色块覆盖
这是最常用、兼容性好（IE9+）、语义清晰的做法：把图片作为底层背景，再用一个半透明的 rgba() 色块盖在上面，模拟“背景图变透明”的视觉效果。
- 必须用
background简写或background-image+background-color分开写，不能只设background-color: rgba(...)—— 否则图片会被覆盖掉 - 推荐写法：
div { background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url("bg.jpg"); background-size: cover; }其中linear-gradient()的两个相同rgba()值生成纯色蒙版，透明度由 alpha 值（如0.3）控制 - 如果只要纯黑/白蒙版，可简化为
background: rgba(0, 0, 0, 0.4), url("bg.jpg")（注意：部分旧浏览器不支持多背景写法，需测试）
用 ::before 伪元素单独控制图层透明度
当需要精确控制图片层透明度、且不希望影响文字或子元素时，伪元素是最稳妥的解法——它把背景图和内容完全分离。
- 父容器设
position: relative，确保伪元素能定位覆盖 -
::before承载图片并设opacity，内容层保持默认不透明 - 示例：
div { position: relative; } div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("bg.jpg") center/cover no-repeat; opacity: 0.6; z-index: -1; } - 注意：
opacity会影响伪元素内所有渲染（包括渐变、边框），但不会波及div里的真实子元素
别踩 opacity 直接套容器的坑
很多人第一反应是给整个 div 加 opacity: 0.7，这会导致文字、按钮、表单控件全部变淡——不是“背景图透明”，而是“整个块变灰”。
立即学习“前端免费学习笔记（深入）”；
- 现象：文字看不清、input 框半透明、hover 效果失效
- 原因：
opacity是作用于整个渲染树节点，不可逆，子元素无法通过opacity: 1拉回来 - 替代思路：若真要全局降噪，改用
backdrop-filter: brightness(0.8)（仅支持较新浏览器），或坚持用伪元素分层
真正要调的是“背景图层的透光程度”，而不是让整个 DOM 元素发虚。伪元素方案虽然多写几行 CSS，但逻辑干净、可控性强，遇到复杂布局（比如带遮罩文字、浮动按钮）时几乎不会翻车。
