rgba()仅作用于纯色背景，无法使背景图半透明；伪元素+opacity是通用方案，需配合position、z-index和尺寸同步；filter:opacity()有性能风险；background-blend-mode不适用于控制透明度。
background-color: rgba() 只对纯色背景有效
这个方法最简单直接，但有个硬限制：rgba() 只能给 background-color 加 alpha 通道，无法让背景图变半透明。如果你的背景是 url(...)，写 background-color: rgba(0,0,0,0.5) 不会动那张图一毫——它只会影响叠加在图片之上的纯色层（比如你同时写了 background-image 和 background-color）。
常见错误是以为加了 rgba() 就能“压暗”背景图，结果发现图一点没变，只多了一层半透黑底。
- 适用场景：背景是单色 + 文字叠在上面（如卡片、弹窗、导航栏）
- alpha 参数是 0–1 的小数，不是百分比；
0.4表示 60% 透明，不是 40% - IE8 及更早不支持，需 fallback：先写一句不透明的
background-color: #000，再写background-color: rgba(0,0,0,0.6)，老浏览器会忽略后一行
::before 伪元素 + opacity 是背景图半透明的主力方案
这是目前最通用、兼容性好、语义干净的做法：用伪元素承载背景图，单独控制它的透明度，主容器放文字，两者层级分离。
关键点不是“用了伪元素”，而是「定位 + z-index + opacity」三者缺一不可。漏掉 position: relative 在父容器上，或忘了 z-index: -1，伪元素就可能盖住文字，或者根本不出现在预期位置。
- 父容器必须设
position: relative - 伪元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -
opacity写在伪元素上，值建议 0.2–0.7；太低看不清图，太高压不住文字 - 如果父容器有圆角（
border-radius），伪元素也要加相同值，否则边缘露白
filter: opacity() 和 opacity 属性行为一致，但慎用于背景图
filter: opacity(0.5) 看起来和 opacity: 0.5 一样，但它作用于渲染后的整个图层，且会触发硬件加速——在某些安卓 WebView 或旧版 Safari 上，可能导致背景图模糊、闪烁甚至消失。
更麻烦的是，filter 会继承，如果父容器用了 filter，子元素即使重置 filter: none 也可能失效。所以除非你明确需要 filter 链式效果（比如 blur + opacity 组合），否则别用它替代 opacity。
-
filter: opacity()和opacity都会让伪元素内容整体变淡，对背景图有效，但性能风险更高 - 不要在同一个元素上同时写
opacity和filter: opacity()，效果会叠加（比如都写 0.5 → 实际变成 0.25） - Chrome 110+ 开始对
filter: opacity()做了优化，但 iOS Safari 16.4 之前仍有偶发渲染异常
background-blend-mode 不适合“半透明背景”需求
有人看到 background-blend-mode: multiply 或 overlay 就想拿来调背景图透明度，这是误解。这个属性是用来混合多个背景图/背景色之间的颜色关系，不是控制透明度的开关。
例如 background: url(img.jpg), #000; background-blend-mode: overlay; 是让黑底和图做叠加运算，结果取决于图里像素明暗，无法稳定得到“图变淡、文字不变”的效果。它不可控、难调试，也不解决透明度继承问题。
- 真正需要的是“图层分离”，不是“颜色混合”
- 若强行用
background-blend-mode模拟半透明，得额外加一层纯色背景（如rgba(0,0,0,0.3)），再跟图 blend，绕远路且增加维护成本 - IE 完全不支持，Firefox 30+ 才开始支持，兼容性不如伪元素方案
background-size 和 background-position 没同步主容器尺寸变化——比如容器宽高由 JS 动态调整，但伪元素没重绘，背景图就会拉伸或错位。遇到这种问题，优先检查伪元素是否响应式覆盖了全部区域，而不是怀疑透明度没生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
