html本身无透明度属性，必须用css的opacity（影响整个元素及子元素）或rgba()/hsla()（仅控制颜色透明度，不波及子元素）实现；opacity取值0~1，rgba/hsla的alpha通道同理。
HTML 本身没有 opacity 属性，透明度必须通过 CSS 的 opacity 或更精确的 rgba()/hsla() 控制；直接写在 HTML 标签里（比如 style="opacity:0.5"）是可行的，但本质仍是内联 CSS。
用 opacity 设置整个元素及其子元素的透明度
opacity 是最常用的透明控制方式，但它会让元素和所有后代一起变透明，无法单独控制子元素不透明。
- 取值范围是
0（完全透明）到1（完全不透明），支持小数如0.75 - 必须写在 CSS 中，可作为内联样式：
<div style="opacity:0.4">内容</div> - 注意：设置
opacity:0后元素仍占据布局空间，且仍可响应事件（除非同时加pointer-events:none） - IE8 及更早版本不支持
opacity，需用filter:alpha(opacity=40)（已过时，仅作兼容参考）
用 rgba() 或 hsla() 精确控制背景/文字颜色透明度
如果只想让背景或文字半透明，而子元素保持不透明，opacity 就不合适了——该用 rgba()（红绿蓝+alpha）或 hsla()（色相饱和度亮度+alpha）。
-
background-color: rgba(0, 0, 0, 0.6)—— 黑色背景带 60% 不透明度，子元素文字不受影响 -
color: hsla(200, 100%, 50%, 0.8)—— 青蓝色文字，80% 不透明度 - alpha 值同样是
0～1，不是百分比数字（别写成rgba(0,0,0,60)） - IE8 不支持
rgba()和hsla()；IE9+ 支持rgba()，IE10+ 支持hsla()
为什么 opacity 有时“失效”？常见错因
不是 CSS 写错了，而是被其他规则覆盖或触发了意外行为：
- 父元素设置了
opacity，子元素即使设opacity:1也无法恢复完全不透明（透明度会叠加） - CSS 优先级问题：外部样式表或
!important覆盖了你的内联opacity - 元素使用了
transform（如translateZ(0)）或will-change，可能触发新层叠上下文，间接影响视觉表现 - 在
position: fixed或position: absolute元素上测试时，误以为透明没生效，其实是被遮挡或 z-index 干扰
替代方案：visibility 和 display 不是透明度
有人混淆 visibility: hidden 或 display: none 与透明度，它们根本不同：
-
visibility: hidden元素不可见但占位，也不响应鼠标事件 -
display: none元素不渲染、不占位、不参与任何布局计算 - 二者都不改变颜色或背景的 alpha 值，不能替代
opacity或rgba()
真正要调透明度，就只盯紧三样：CSS 的 opacity、rgba()、hsla()。其他所有“看起来透明”的效果，大概率是误解了渲染逻辑或被层叠上下文绕进去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
