真正可控的透明背景必须用 rgba()，它只影响背景色而不降低文字和子元素透明度；rgba() 的 alpha 值范围是 0 到 1，支持小数，而 opacity 会整体变淡导致可读性下降。
用 background-color 的 rgba 值设置区块透明背景
直接写 background-color: transparent 虽然能清空背景，但无法控制“半透”程度；真正可控的透明背景必须用 rgba()。它比 opacity 安全——只影响背景色，不连带文字、子元素一起变淡。
常见错误是把 opacity 当成背景透明方案，结果整个 <div> 内容都发虚，尤其文字可读性暴跌。而 <code>rgba(255, 255, 255, 0.7) 这种写法，只让背景色带 70% 不透明度，文字保持 100% 清晰。
-
rgba()第四个参数是 alpha 值，范围是0（全透）到1（不透），支持小数如0.2、0.85 - 十六进制颜色（如
#fff）不能直接加透明度，得先转成 rgb 或用hsla() - IE9 及更早版本不支持
rgba()，如果必须兼容，得额外加一句filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);（仅限 IE8–9）
避免 opacity 导致子元素意外变透明
给容器设 opacity: 0.6 后，里面所有文字、图片、按钮都会同步变淡——这不是背景透明，是整块区域“罩了层灰玻璃”。多数场景下这是副作用，不是需求。
典型翻车现场：导航栏用了 opacity，结果菜单文字看不清；卡片用了 opacity，里面的图标和链接点击反馈也变弱。根源在于 opacity 是作用于整个渲染树节点，无法局部隔离。
- 想只让背景透、内容不透，死守一条：只动
background-color，不动opacity - 若真需整体降透明（比如模态框遮罩层），就单独抽一层空
<div>，专用于遮罩，不塞内容 <li>用开发者工具检查元素时，留意样式面板里 <code>opacity是否被父级意外继承 -
hsla()和rgba()浏览器支持度一致，现代浏览器全支持 - 色相
h是 0–360 的整数，0（红）、120（绿）、240（蓝） - 明度
l是 0%（黑）到 100%（白），调高l+ 降低a容易撞上“发灰看不清”的临界点，建议在真实设备上预览 - 用浏览器开发者工具的“颜色拾取器”，点一下文字，看实际渲染出的对比度是否 ≥ 4.5:1（WCAG AA 标准）
- 别依赖设计师给的“理想稿”，要在真机+暗色/亮色系统主题下实测
- 安全做法：透明背景区块内，文字强制用深色（如
#333）或纯白（#fff），并加text-shadow: 0 1px 2px rgba(0,0,0,0.1)提升边缘可读性
用 hsla() 替代 rgba() 控制色相+透明度
当需要微调色调的同时维持透明度（比如深蓝背景要透一点，但又不想改亮度），hsla() 比 rgba() 更直观。它把颜色拆成色相（h）、饱和度（s）、明度（l）和透明度（a），改 h 值不破坏原有透明设定。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
比如浅灰背景常写成 hsla(0, 0%, 95%, 0.8)，要改成暖灰？只需调 h 到 30（偏黄），a 仍为 0.8，不用重新算 rgb 数值。
透明背景遇上图片或深色文字时的可读性陷阱
背景一透明，底下内容（比如滚动的页面正文、贴图背景）就会透上来，文字立刻糊成一片。这不是代码写错了，是视觉对比度崩了。
最常被忽略的是文字颜色没跟着调整。白色文字放在 rgba(0,0,0,0.1) 黑底上很清晰，但同一文字放在半透的白底上就几乎隐形——因为实际呈现是浅灰字叠浅灰底。
rgba()，再根据色调需求换 hsla()，全程绕开 opacity。透明不是目的，内容清晰才是。
