应优先用RGBA实现背景半透明而文字清晰，因opacity会使整个元素及子元素统一透明且无法单独控制；RGBA仅作用于指定颜色属性，互不干扰，且不触发新的堆叠上下文。
opacity 会让整个元素及其子元素一起变透明
很多人想让背景半透明，结果发现文字也跟着发虚——
控制的是整个渲染盒子的透明度，包括所有子节点。它不区分背景、文字或边框，只要在同一个 DOM 节点上设置，就全按比例“透”过去。
会让元素自身和所有子元素都变成 50% 透明，无法单独控制某一部分
如果父容器设了
，子元素即使写
也无效（继承 + 叠加计算）
会影响可访问性：屏幕阅读器可能因视觉弱化误判内容重要性
动画中用
性能尚可（触发合成），但若同时有 transform 或 filter，需留意层叠上下文变化
RGBA 颜色只作用于当前属性值，不影响子元素
想让背景半透明而文字保持清晰？直接给
用
就行。RGBA 是颜色模型的一部分，只改变该颜色通道的 alpha 值，和元素结构完全解耦。
→ 文字红且 80% 不透明；
→ 背景黑且 10% 不透明；互不干扰
支持所有接受颜色值的 CSS 属性：
、
、
都能用
注意：IE8 及更早版本不支持 RGBA，但现代项目基本不用考虑；如需兼容，可用
（HEX8）替代
HEX8 和 RGB 与 RGBA 的实际效果差异
现在主流浏览器都支持 8 位 HEX（如
），它等价于
（33₁₆ ≈ 51/255 ≈ 0.2）。但别以为写成
就能用——
不接受 alpha 参数，必须写
或
。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
是无效语法，会被浏览器直接忽略
和
渲染效果一致，但后者更简洁，适合工具链自动压缩
用预处理器（如 Sass）时，
编译后仍是
，本质没变
什么时候非得用 opacity，而不是 RGBA
只有两种典型场景绕不开
：需要整块区域（含图标、文字、边框）统一淡入/淡出；或者要实现「玻璃态」叠加效果（比如模态框遮罩层），此时你本来就要压暗整个子树。
立即学习
“
前端免费学习笔记（深入）
”；
做 loading 动画遮罩时：
—— 这里用
也可以，但语义上更推荐
，因为遮罩本就是整体行为
配合
做显示隐藏时，
+
组合比反复改
更轻量
切记：如果遮罩层里嵌了按钮，又希望按钮文字不透明，就得把按钮提出来放到同级，不能塞在遮罩内部
真正容易被忽略的不是写法，而是层级关系——
会强制创建新的堆叠上下文，可能意外改变 z-index 行为；而
完全不触发这个机制。调样式时如果发现元素突然被盖住了，先查查父级有没有悄悄加了
。
opacityopacity: 0.5opacityopacity: 1opacitybackground-colorrgba(0, 0, 0, 0.3)color: rgba(255, 0, 0, 0.8)background-color: rgba(0, 0, 0, 0.1)border-colorbox-shadowtext-shadowbackground: #0000001a#00000033rgba(0, 0, 0, 0.2)rgb(0, 0, 0, 0.2)rgb()rgba()#rrggbbaargb(0,0,0,0.2)rgba(0,0,0,0.2)#00000033fade-out(black, 0.8)rgba()opacitydiv.overlay { opacity: 0.6; background: black; }rgba()opacitytransitionopacityvisibilityrgba()opacityrgba()opacity