opacity是css属性而非html属性，必须通过style、style标签或外部css设置；错误写法如opacity="0.5"无效；正确写法为style="opacity: 0.4;"或class配合css定义；opacity影响子元素且不阻止交互，需配合pointer-events: none；替代方案用rgba()控制背景透明；ie8需用filter: alpha(opacity=30)兼容。
opacity不是HTML属性，必须走CSS
直接在
常见错误包括：<button opacity="0.3">点我</button>，浏览器会忽略这个“属性”，按钮毫无变化；或者误写成opacity: 50%（CSS只认0～1的小数，百分比写法会被丢弃）。
- 正确内联写法：
<button style="opacity: 0.4;">半透明按钮</button> - 推荐用class控制：
<button class="btn-fade">按钮</button>，再在CSS里定义.btn-fade { opacity: 0.6; } - 别和
background-color混用：比如background-color: #fff; opacity: 0.2;会导致文字+背景一起发灰，而不是“背景透出”
opacity: 0 后按钮还能点，这是坑
opacity: 0只是让按钮视觉上消失，但它依然占据布局空间、仍能接收鼠标事件（比如click、hover）。用户看不见却能点中，极易引发误操作。
如果你真想让它“不可见且不可交互”，必须额外加一句：pointer-events: none;。但注意：这句不能单独存在，得和opacity一起用才有效果。
- 安全写法：
style="opacity: 0; pointer-events: none;" - 如果只想隐藏但保留交互（比如做淡出动画最后一帧），就只用
opacity: 0，不用动pointer-events -
visibility: hidden也能隐藏，但它阻止事件，且不触发重排；而opacity: 0会触发GPU加速（适合动画），但事件默认开着
子元素无法靠opacity: 1“救回来”
给<button></button>设了opacity: 0.3，再给里面文字加style="opacity: 1"？没用。CSS规定父元素的opacity会创建新的层叠上下文，子元素透明度是相乘关系（0.3 × 1 = 0.3），永远翻不了盘。
所以，当你要“按钮背景半透、文字清晰”时，opacity根本不是解法。必须换路线：
- 用
background-color: rgba(0, 0, 0, 0.2)控制背景透明，文字颜色保持color: #000不变 - 边框同理：
border-color: rgba(0, 0, 0, 0.3) - 如果按钮含图标（比如
<svg></svg>），它的颜色也得单独设fill或stroke，不能指望靠父级opacity统一调
IE8兼容要绕开opacity
IE8及更早版本不支持opacity，但仍有少量老系统残留。若必须兼容，得用filter: alpha(opacity=30)（30对应0.3）。不过这玩意只在IE生效，现代浏览器会忽略，且它会让文字渲染变模糊。
更现实的做法是：放弃IE8支持，或用CSS前缀工具（如Autoprefixer）自动补全，但注意filter和opacity行为不完全一致——比如filter不影响层叠上下文，而opacity会。
- 双写保底（仅限必须兼容场景）：
opacity: 0.3; filter: alpha(opacity=30); -
rgba()在IE9+才支持，IE8连半透背景都做不到，只能退到纯色+JS模拟淡入效果 - 真正麻烦的不是语法，而是IE8下
opacity和filter对表单控件（如<button></button>）的支持极不稳定，建议直接规避
最常被忽略的一点：透明度不是独立视觉属性，它和背景、字体颜色、父容器是否带背景强相关。调完opacity没看到预期效果，八成是外层或包裹<div>的白色背景盖住了“透出去”的部分——先关掉父级背景再调试。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
