opacity作用于整个元素及其子元素，rgba()/hsla()仅作用于指定颜色属性；伪元素配合opacity可实现背景透明而内容不透明。
opacity 和 rgba()（或 hsla()）是两种根本不同的透明控制机制，选错会导致文字发灰、背景糊成一片，或者 hover 效果失效。
opacity 会让整个元素连同子元素一起变透明
给一个 div 设置 opacity: 0.4，里面的文字、图片、按钮、甚至 ::before 伪元素都会按相同比例变淡——这不是“背景透”，是整棵树被压暗一层。
- 值必须是 0 到 1 的小数，
opacity: 50%或opacity: 50都无效，浏览器直接忽略整条声明 -
opacity: 0的元素仍占据布局空间，且默认仍响应点击/悬停事件；要禁用交互得额外加pointer-events: none - 子元素无法靠设
opacity: 1挽回清晰度——它是乘法叠加：父级 0.4 × 子级 1 = 最终 0.4 - IE8 及更早需 fallback
filter: alpha(opacity=40)，但新项目不建议兼容
rgba() 和 hsla() 只影响指定颜色属性
它们只作用于你明确赋值的属性，比如 background-color、border-color、color。文字保持原样，背景却能透出下层内容。
-
background-color: rgba(0, 0, 0, 0.3)→ 半透明黑底，文字依然锐利 -
color: hsla(200, 100%, 50%, 0.8)→ 文字带 80% 透明度，不影响背景 - alpha 值同样是 0–1 小数，不是百分比；
rgba(0,0,0,30)是非法写法 - 现代浏览器全部支持，IE9+ 起可用；IE8 不支持，需降级为纯色或 PNG 背景图
表格里设透明度最容易踩坑
直接给 <table> 加 opacity，结果所有单元格文字都变淡、边框发虚、hover 反馈弱得看不见——这恰恰是它该干的事，不是 bug。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 若只要背景透、文字清，删掉
opacity，改用background-color: rgba(...)设在tbody或tr上 - 注意
border-collapse: collapse，否则border-spacing会制造白色缝隙，破坏透明连续感 - Bootstrap 等框架常给
table默认加背景色，用浏览器 DevTools 查Computed标签确认最终生效值
伪元素才是真·局部透明的解法
当你要让一张背景图半透明、但上面的文字和按钮完全不透明，opacity 和 rgba() 都不够用——这时候得用 ::before 或 ::after。
- 把图片设为伪元素的
background，再给它加opacity - 主元素自身不设透明，文字、按钮自然保持 100% 清晰
- 必须配
position: relative（主元素） +position: absolute（伪元素） +z-index: -1，否则层级错乱
真正难的不是写哪行代码，而是想清楚：你到底想让「什么」透明、「谁」保持不透明——这个判断错了，后面全白搭。
