1. CSS opacity 的基础概念
1.1 opacity 的定义
opacity 是 CSS 属性，用来设置元素及其子元素的透明度，取值范围从 0 到 1，0 表示完全透明，1 表示完全不透明。
当 opacity 设为 0.5 时，元素及其包含的文本和子元素都会变成半透明，影响视觉层级与可读性。
本指南聚焦 CSS opacity 在前端开发中的作用与使用场景，从基础到实战的完整指南，这个属性是实现渐变、遮罩以及交互效果的核心之一。
/* 基本用法：使元素半透明 */
.box { opacity: 0.6; }1.2 与 rgba 的关系
如果你需要只改变背景的透明度，而不影响文字，可使用 背景颜色的 rgba() 或 hsla()，这让文本保持可读性。
相比直接使用 opacity，RGBA 可以分离前景与背景的透明度，提供更灵活的视觉设计。
/* 只改变背景透明度，不影响文字 */
.card { background-color: rgba(0, 0, 0, 0.5); color: #fff; }2. 使用场景与设计原则
2.1 常见使用场景
在前端开发中，opacity 常用于实现图片/卡片的悬浮效果、模态对话框的遮罩层、按钮的禁用态，以及卡片叠层的视觉层级。
通过调整透明度，可以直观地传达状态变化，例如在鼠标悬停时提升可点击性，或在页面加载时显示灰度占位。
/* 悬停变得更清晰 */
.button { opacity: 0.7; transition: opacity 0.25s ease; }
.button:hover { opacity: 1; }2.2 设计原则与无障碍
使用 opacity 需要考虑对比度和可读性，过低的透明度会降低文本的对比度，影响可访问性。
对于文本类元素，优先考虑用颜色或背景色的 rgba 来调整对比度，而不是直接对整個元素应用 opacity，这样能保留文本的清晰度。
3. 实战技巧：交互与无障碍
3.1 动画与过渡
结合 transition，opacity 的变化可以实现平滑的交互反馈，提升用户体验。
为了优化性能，建议在需要动画的元素上使用 will-change: opacity 或者仅对需要变化的属性使用过渡。
/* 过渡效果示例 */
.card { opacity: 0.6; transition: opacity 0.25s ease; }
.card:hover { opacity: 1; }3.2 可访问性与对比度提升
在涉及文本时，结合 背景 rgba 的透明度与文本颜色的对比度，确保屏幕阅读器用户也能清楚阅读。
提示：可用 color-contrast-tools 检查对比度，必要时使用更高的对比度或文本阴影以提高可读性。
4. 兼容性与性能注意点
4.1 浏览器兼容性
主流浏览器对 opacity 的支持非常好，几乎在所有现代浏览器中都可用，混合使用 rgba 还可提高灵活性。
在老版本浏览器中，opacity 的实现同样稳定，因此可以放心用于大多数前端项目。
4.2 性能与硬件加速
opacity 的渲染通常由 GPU 处理，硬件加速 能带来流畅的动画体验。
为避免重绘与重排，建议对需要变化的元素仅改变 opacity，并尽量避免在同一页面上对大量文本进行频繁改变。
5. 代码示例汇总
5.1 基本用法
/* 基本用法：让元素半透明 */
.opac-box { opacity: 0.5; }该示例展示了最直接的用法，通过把 opacity 应用于目标元素，整个位级与内容都参与透明效果。
5.2 悬停交互与过渡
/* 悬停时提升透明度，并添加平滑过渡 */
.card { opacity: 0.6; transition: opacity 0.3s ease; }
.card:hover { opacity: 1; }通过组合 opacity 与 transition，可以实现直观的视觉反馈，增强交互感。
5.3 背景透明度与文本可读性
/* 背景透明度，文本不变 */
.banner { background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 20px; }本示例强调使用 rgba 背景透明度来保护文本对比度，避免直接对文本应用 opacity。
