最直接的透明度设置是CSS的opacity属性，取值0到1，影响元素及其所有子元素；2. 若仅需背景透明，应使用rgba()或hsla()颜色值，避免内容变透明；3. opacity会创建层叠上下文，可能触发硬件加速，提升动画性能但增加内存消耗，需根据实际需求选择合适方法。
设置元素透明度最直接的方法是使用 CSS 的 opacity 属性。它控制整个元素的不透明程度，取值范围从 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
基本语法
opacity: value;value 可以是：
- 0：完全透明
- 0.5：半透明
- 1：完全不透明（默认值）
例如：
div { opacity: 0.6; }这会让该 div 及其所有子元素都变为 60% 不透明。
立即学习“前端免费学习笔记（深入）”；
opacity 的影响范围
需要注意的是，opacity 会影响元素本身及其所有子元素。如果只想让背景透明而内容保持清晰，使用 opacity 可能不是最佳选择。
比如一个包含文字的盒子设置了 opacity: 0.5，那么文字也会跟着变透明，可能影响可读性。
只让背景透明，不影响内容
如果只想让背景透明，推荐使用支持透明度的颜色值，如 rgba() 或 hsla()。
- rgba(0, 0, 0, 0.5)：黑色半透明背景
- hsla(120, 100%, 50%, 0.3)：绿色系带 30% 不透明度
示例：
.box { background-color: rgba(255, 0, 0, 0.4); }这样只有背景是半透明的，文字或子元素不受影响。
透明度与性能
使用 opacity 会创建新的层叠上下文，浏览器可能会开启硬件加速来渲染该元素，这对动画效果有帮助，但也可能增加内存消耗。在移动端大量使用半透明元素时需注意性能表现。
基本上就这些。根据实际需求选择 opacity 还是 rgba 来控制透明效果更合适。
