opacity属性用于整体透明度控制，取值0到1，影响元素及其所有子元素的视觉呈现，包括背景、文字和边框；若仅需背景透明，应使用rgba或hsla以保持文字清晰。
使用 CSS 的 opacity 属性会改变整个元素的透明度，包括它的背景色、文字颜色、边框以及所有子元素。它不会单独影响某一种颜色，而是对元素整体进行透明化处理。
opacity 基本用法
opacity 的取值范围是 0 到 1：
- 0 表示完全透明（看不见）
- 1 表示完全不透明（默认值）
- 0.5 表示半透明
.element {
opacity: 0.6;
}
这个设置会让整个元素及其内容（文字、图片、背景等）都变成 60% 不透明。
立即学习“前端免费学习笔记（深入）”；
opacity 对颜色的实际影响
假设一个元素的文字颜色是红色（#FF0000），背景是蓝色（#0000FF），当你设置 opacity: 0.5 时：
- 文字看起来不再是纯红，而是带有背景透过的“弱化红”
- 背景色也会变淡，并可能与下层元素混合显示
- 视觉上颜色“变浅”或“发灰”，是因为和背后颜色叠加了
这种效果类似于在颜料中加水——颜色还在，但变得透明，能看见后面的内容。
只想让背景透明？用 rgba 或 hsla
如果你只希望背景色透明，而文字保持清晰，不要用 opacity，改用 rgba() 或 hsla()：
.element {
background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
color: #000; /* 文字仍然是纯黑色 */
}
这样背景有透明度，但文字、边框等其他部分不受影响。
常见误区与建议
- opacity 影响的是整个元素树，包含所有子元素 —— 子元素无法通过设置 opacity: 1 来“恢复”不透明
- 如果只需要颜色透明，优先考虑 rgba() 而不是 opacity
- opacity 常用于 hover 效果、遮罩层、淡入淡出动画等整体透明控制场景
基本上就这些。opacity 是全局透明控制，不是颜色调节工具。要精细控制颜色透明度，用 rgba 或 hsla 更合适。
