opacity属性设置元素透明度时会连带影响所有子元素，数值范围0–1且不支持百分比；若需背景透明而文字不透明，应使用rgba/hsla颜色函数或拆分DOM结构。
直接用 opacity 属性就能设置元素透明度，但它会连带影响所有子元素——这不是 bug，而是浏览器渲染机制决定的。
opacity 的基本用法
给元素写 opacity: 数值，数值范围是 0（完全透明）到 1（完全不透明），支持小数，比如 0.3、0.75。注意不能写百分比，opacity: 50% 是无效的。
- 默认值是
1，即完全不透明 - 设为
0后，元素依然占据页面空间，能响应点击、hover 等事件 - 常用于淡入淡出动画、遮罩层、禁用态视觉反馈
opacity 一定会波及子元素
只要父元素设置了 opacity，它的所有子元素（文字、图片、按钮、伪元素等）都会被“乘上”这个透明度。哪怕你在子元素里写 opacity: 1，最终显示效果仍是 父级值 × 子级值。
- 例如：父元素
opacity: 0.4，子元素opacity: 1→ 实际显示为 0.4 - 这会强制创建新的层叠上下文，可能影响
z-index行为 - 无法靠子元素自身样式覆盖，必须调整父级值或换方案
想只让背景透明而文字清晰？别用 opacity
如果目标是“背景半透、内容不透”，opacity 不合适。应改用带 alpha 通道的颜色函数：
-
background-color: rgba(255, 255, 255, 0.8)—— 白色背景 80% 不透明，文字不受影响 -
border-color: hsla(200, 100%, 50%, 0.4)—— 边框带透明度，不影响内部结构 - RGBA/HSLA 中的 alpha 值和 opacity 数值意义一致（0–1），但作用域仅限当前颜色属性
需要精细控制时的替代思路
当既要整体视觉分层，又要各部分独立控透明，可拆解 DOM 结构：
- 把“背景层”和“内容层”设为同级兄弟元素，都放在一个
position: relative容器中 - 用
position: absolute+z-index控制叠放顺序 - 只给背景层加
opacity，内容层保持自由
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
