直接给目标元素加opacity即可，但必须用0–1小数（如0.4），禁用百分比；若仅需背景透明而文字清晰，应改用background-color:rgba()，因opacity会使整个元素及子元素统一变淡且不可逆。
直接给目标元素加 opacity 就行，但必须写小数（比如 0.4），不能写百分比（50% 无效）；若只要背景透而文字不透，就别碰 opacity，改用 background-color: rgba()。
为什么写了 opacity: 0.5 却没变化？
常见干扰项比代码本身更常导致“失效”：
- 父容器（比如
或外层<div>）有纯色背景，盖住了你想要的“透出效果” <li>CSS 优先级更高的一条规则覆盖了你的设置，比如外部样式表里写了 <code>table { opacity: 1 !important; } - 表格用了默认的
border-collapse: separate，border-spacing留下空白间隙，视觉上割裂透明感；需显式加border-collapse: collapse; border-spacing: 0; - 某些 UI 框架（如 Bootstrap）会给
<table> 默认加背景色或边框，得用开发者工具检查 computed styles 确认最终生效值 <h3> <code>opacity和rgba()到底该选哪个？关键区别不在“能不能透”，而在“透什么”：
-
opacity: 0.6→ 文字、边框、子元素、背景，全部一起变淡 -
background-color: rgba(255, 255, 255, 0.6)→ 只动背景，文字照常清晰 - 混用是典型错误：比如
background-color: #000; opacity: 0.5，结果是灰黑底 + 半透明文字，对比度崩坏 -
opacity创建新的层叠上下文，可能意外影响 z-index 或 transform 动画行为；rgba()则无此副作用
表格里单独调某一行或单元格的透明度，靠谱吗？
技术上可行，但容易引发意外交互问题：
- 给
<td> 加 <code>opacity: 0.7后，它的:hover背景色也会被乘以 0.7，反馈感变弱 - 相邻
<td> 透明度不同，视觉上像“拼接错位”，尤其在有边框或阴影时更明显 <li>如果该单元格内含按钮或链接，<code>opacity: 0仍可点击——需额外加pointer-events: none才禁用 - 动画场景下，
opacity是 GPU 友好属性；但若要精细控制各部分（比如只让背景渐变、文字保持 solid），就得拆开用rgba()+color+border-color
真正难的不是写对那一行 CSS，而是判断“要不要用
opacity”。它是一把全量开关，一旦打开，所有子内容都跟着降级；而多数真实需求其实只需要背景呼吸感——这时候，rgba()才是那个被忽略却最稳的选择。 -
