opacity只能整体控制元素及其子元素透明度，无法单独设置背景或文字透明；取值0~1，0为全透明，1为不透明；若需仅背景透明，应使用rgba()或transparent。
opacity 只能整体控制元素及其所有子元素的透明度，无法单独让背景或文字变透明。
opacity 的取值范围和基本用法
opacity 接受 0 到 1 之间的数字（包括小数），0 表示完全透明，1 表示完全不透明。它作用于整个元素盒模型（内容、边框、背景、子元素都会被统一变淡）。
-
opacity: 0.5—— 元素半透明，但内部文字、图片、子容器也同步变淡 -
opacity: 0—— 元素不可见，但仍占据文档流位置，且仍可响应事件（如click） -
opacity: 1—— 默认值，等效于未设置
想只让背景透明？别用 opacity，改用 rgba() 或 transparent
如果目标是「文字清晰、背景模糊/半透」，opacity 不适用——它会把文字也变淡。正确做法是直接给 background-color 设置带 alpha 通道的值：
- 用
rgba(255, 255, 255, 0.3)替代background-color: white+opacity: 0.3 - 用
background-color: transparent实现纯透明背景（无颜色、无遮挡） - 注意：
rgba()在 IE9+ 和所有现代浏览器中支持良好；若需兼容 IE8，可用Filter: alpha(opacity=30)（仅限 IE）
opacity 会影响子元素，常见踩坑场景
当对父容器设置 opacity，其所有后代元素都会继承该透明度（无法通过设置子元素 opacity: 1 恢复）。例如：
立即学习“前端免费学习笔记（深入）”；
div.container { opacity: 0.6; } div.container p { opacity: 1; } /* 这不会让 p 变回不透明 */解决方法只有两个：
- 避免用父级
opacity控制局部透明，改为对具体元素单独设background-color或color - 用伪元素（如
::before）覆盖背景层，并单独设透明度，让内容层保持opacity: 1
真正需要透明效果时，先问一句：是要整个盒子变淡，还是只想调背景/文字/边框其中之一？选错方式会导致视觉失真或交互异常。