优先使用rgba()或hsla()实现背景半透明，避免opacity影响子元素；边框半透明需配合background-clip: padding-box；伪元素覆盖更适合可交互遮罩层。
想让 HTML 元素半透明，别直接套 opacity —— 它会让文字、子元素全跟着变淡，多数时候不是你想要的。
用 opacity 时，整个元素树都变透明
这个属性作用于整个渲染盒（包括所有子节点），设置后子元素无法“恢复不透明”。常见误用场景：
- 父容器设了
opacity: 0.6，里面按钮文字也变模糊，点击区域却还在 —— 用户看不清还点不准 - 做弹窗遮罩层时用了
opacity，结果遮罩下的表单输入框焦点样式也被削弱，视觉反馈失效 -
opacity: 0的元素仍占文档流、可被聚焦、能响应事件，只是看不见 —— 不等于“隐藏”
它还会强制创建新的层叠上下文，可能意外改变 z-index 行为，尤其在动画或 modal 叠加时容易出错。
只让背景半透明？用 rgba() 或 hsla()
这是最常用也最稳妥的方案，只影响你明确写的那个颜色属性：
立即学习“前端免费学习笔记（深入）”；
-
background-color: rgba(0, 0, 0, 0.4)→ 背景灰黑半透，文字完全清晰 -
border-color: rgba(100, 150, 255, 0.7)→ 边框带透明度，不影响背景和内容 -
color: hsla(200, 100%, 50%, 0.8)→ 文字本身带透明，但不波及父/子元素
注意：rgba() 在 IE9+ 和所有现代浏览器中都支持；IE8 及以下不支持，若必须兼容，得 fallback 到 PNG 背景图或滤镜（filter: alpha(opacity=40)），但已基本可忽略。
边框半透明要小心背景溢出
直接写 border: 2px solid rgba(0, 100, 255, 0.5) 看似可行，但默认情况下元素背景会延伸到边框区域，导致“边框看起来不透明”——其实是背景盖住了半透边框。
解决方法是加一句：
background-clip: padding-box;
这告诉浏览器：背景只画到内边距边缘，别进边框区。否则即使边框用了 rgba，你也看不到效果。
伪元素覆盖更适合复杂半透明层
当需要叠加一层可交互、可定位、又不影响原内容透明度的遮罩时（比如图片上加文字蒙版），别硬塞 opacity 到父容器，而是用伪元素：
.card { position: relative; }<br>.card::before {<br> content: "";<br> position: absolute;<br> top: 0; left: 0;<br> width: 100%; height: 100%;<br> background: rgba(0, 0, 0, 0.3);<br>}
这样既能控制层级、尺寸、过渡动画，又不会污染原 DOM 结构的透明状态。
真正容易被忽略的是：透明 ≠ 隐藏，opacity ≠ visibility ≠ display。很多交互 bug 源于以为设了 opacity: 0 就等于“不可见不可触”，结果键盘焦点还在、屏幕阅读器仍播报、点击事件照常触发 —— 这些细节不验就上线，用户第一反应就是“页面卡了”。
