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