opacity属性用于控制元素整体透明度，取值0到1，0为完全透明，1为不透明；它会影响元素及其所有子元素，常用于实现淡入淡出、遮罩层等效果；若仅需背景透明，应使用RGBA颜色值以避免影响内容清晰度；结合transition可实现平滑动画，如:hover时的透明度变化。
CSS 中的 opacity 属性是控制元素透明度的常用方式。它能让你设置整个元素（包括内容、背景、边框等）的可见程度，取值范围从 0 到 1。通过合理使用 opacity，可以实现淡入淡出、遮罩层、按钮禁用状态等视觉效果。
opacity 属性的基本语法
opacity 属性接受一个数值，表示元素的不透明度：
opacity: value;其中 value 是 0 到 1 之间的数字：
- 0：完全透明（看不见）
- 0.5：半透明
- 1：完全不透明（默认值）
例如，将一个 div 设置为半透明：
立即学习“前端免费学习笔记（深入）”；
div { opacity: 0.5; }opacity 对子元素的影响
opacity 作用于整个元素及其所有子元素。如果父元素设置了 opacity，其内部的所有内容都会继承这个透明度。
比如有一个包含文字和图片的容器：
.box { opacity: 0.3; }
此时，文字、图片、背景都会变成 30% 不透明。这与只让背景透明不同，不会影响文字清晰度的是 RGBA 或 transparent 背景色。
替代方案：仅背景透明
如果你只想让背景透明而保持内容清晰，推荐使用 RGBA 颜色：
.box { background-color: rgba(0, 0, 0, 0.3); opacity: 1; }这样背景有 30% 不透明度，但文字和子元素不受影响。transparent 关键字也可用于边框或颜色：
border: 1px solid rgba(0, 0, 0, 0.2);结合 transition 实现平滑动画
opacity 非常适合做淡入淡出动画。配合 transition 可以实现自然的视觉过渡：
.box { opacity: 1; transition: opacity 0.3s ease; }.box:hover { opacity: 0.7; }
当鼠标悬停时，元素会缓慢变透明。常用于按钮、图片遮罩或提示框的显示隐藏。
基本上就这些。opacity 简单有效，但注意它会影响整个元素层级。需要精细控制时，考虑用 RGBA 或其他透明方案。
