opacity属性用于设置元素及其子元素的整体透明度，取值0到1，0为完全透明，1为完全不透明。设置opacity会影响整个元素的视觉层次，常用于遮罩层、禁用状态提示和淡入淡出动画，但会导致内容模糊影响可读性。与rgba()不同，opacity作用于所有子元素，无法通过子元素设置opacity:1抵消，而rgba()仅影响背景或文字颜色，控制更精确。使用时应优先考虑rgba()实现背景透明以避免可访问性问题。
在CSS中，opacity 属性用于设置元素的透明度，它会影响整个元素及其所有子元素的显示效果。取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
opacity的基本作用
当你给一个元素设置 opacity: 0.5，这个元素以及它的文字、背景、边框和所有子元素都会变成半透明状态。例如：
div {
opacity: 0.5;
}此时，如果这个 div 里有图片或文字，它们也会一并变透明，视觉上会“透出”后面的元素或背景。
对视觉层次的影响
降低透明度会让元素看起来“后退”，常用于：
立即学习“前端免费学习笔记（深入）”；
- 创建遮罩层或模态框背景
- 提示用户某个区域不可交互（如禁用状态）
- 实现淡入淡出动画效果
由于整体透明，内容可能变得模糊或难以阅读，尤其当背景复杂时。
与RGBA透明度的区别
opacity 是作用于整个元素及其子元素的，而使用 background-color: rgba(0,0,0,0.5) 或 color: rgba(255,0,0,0.3) 只会影响特定属性（比如背景或文字颜色），不会让子元素也变透明。
举例：
.box {
background-color: rgba(0, 0, 0, 0.5); /* 背景半透明 */
color: white;
}
.child {
opacity: 1; /* 子元素仍可保持不透明 */
}这种情况下，只有背景是半透明的，文字和子元素不受影响，控制更精细。
注意事项
使用 opacity 时要注意：
- 子元素无法通过设置自己的 opacity: 1 来“抵消”父元素的透明度
- 低透明度可能影响可访问性，特别是文本可读性
- 在需要仅背景透明时，优先考虑 rgba() 或 hsla()
基本上就这些。opacity 是个简单但影响全面的属性，合理使用能提升界面表现力，但要避免误用导致内容看不清。
