不能用 opacity 因为它会使子元素（文字、图片等）一同变透明；应使用 background-color 的 rgba() 值，仅让背景透明而内容保持 100% 不透明，兼容性好且语义清晰。
背景半透明但文字不透明，为什么不能用 opacity？
直接给容器加 opacity: 0.5 看似简单，但会把里面所有子元素（包括文字、图片、按钮）一起变淡，这不是你想要的。真正需要的是「仅背景透明，内容保持原样」。
用 background-color 的 rgba() 值控制背景透明度
rgba() 是最直接、兼容性好、语义清晰的方案：前三个参数是红绿蓝（0–255），第四个是 alpha 通道（0–1），只作用于颜色本身，不影响子元素。
- 文字、图标、子容器完全不受影响，保持 100% 不透明
- 支持所有现代浏览器（IE9+）
- 可与渐变、图片背景叠加使用（如
background: rgba(0,0,0,0.3) url(bg.jpg)） - 避免用
hsla()替代——虽然原理类似，但色相/饱和度调整容易偏离预期，不如rgba()直观可控
div.card {
background-color: rgba(255, 255, 255, 0.8); /* 白底 80% 不透明 */
color: #333;
padding: 16px;
}
遇到 background-image 时怎么加半透明遮罩？
如果背景是图片，又想压一层半透明白/灰遮罩来提升文字可读性，别用额外 DOM 元素或伪元素模拟——容易破坏结构和可访问性。推荐用多层 background 值叠加：
- 顺序很重要：逗号分隔的多个背景中，前面的在上层
- 第一层用
rgba()模拟遮罩，第二层才是图片 - 确保图片有
no-repeat center / cover等合理设置，否则遮罩可能错位
div.hero {
background:
rgba(255, 255, 255, 0.7), /* 遮罩层：白+70%不透明 */
url(/images/hero.jpg); /* 底层：图片 */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
IE8 及更老浏览器不支持 rgba() 怎么办？
如果你必须兼容 IE8，rgba() 会退化为透明（显示父级背景），此时可用 filter 作为降级方案，但仅限背景色（不适用于图片背景）：
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);—— 这个写法本质是 IE 特有的渐变滤镜，通过十六进制 ARGB（Alpha-RGB）模拟 rgba 效果 -
#CCFFFFFF中前两位CC是透明度（00–FF），后面六位是 RGB；CC≈ 80% 不透明 - 注意：该滤镜会强制触发 hasLayout，可能影响盒模型，慎用于复杂布局
真正麻烦的不是写法，而是忘记检查设计稿里「半透明」是否真的指「背景」——有时候设计师给的是带透明度的 PNG 背景图，这时直接替换图片比硬套 rgba() 更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
