最稳妥方式是用 background-color: transparent；#RRGGBBAA 等透明色兼容性差、语义弱；禁用 opacity 以免内容整体变淡；需兼顾父背景与文字可读性。
直接让
或
background-color: transparent，而不是靠颜色代码“模拟”透明——因为所谓“透明颜色代码”（比如 #00000000 或 rgba(0,0,0,0)）本质仍是设置背景色，且必须明确指定，不能省略。
为什么不用十六进制“透明色”如 #00000000？
虽然带 Alpha 通道的 8 位十六进制写法（如 #RRGGBBAA）在现代浏览器中已支持，但它有明显限制：
-
#00000000看似“全透明黑”，但 IE 完全不支持，android 4.4 及更早 webview 也不认 - 它只能表示纯色+透明度，无法实现渐变、图片叠加等复合背景
- 可读性差：
#ffffff80是半透明白，但不如rgba(255,255,255,0.5)直观 - 若父元素本身有背景，仅靠该值无法控制是否继承或遮盖
正确设置 li 或 ul 背景透明的写法
优先使用标准、兼容、语义清晰的 css 声明。以下写法均有效，按推荐顺序排列：
-
background-color: transparent—— 最简洁，100% 透明，无任何颜色干扰，兼容所有浏览器（包括 IE6+） -
background-color: rgba(0,0,0,0)—— 效果同上，但显式声明了“黑+0透明度”，适合后续要动态改透明度的场景（如 js 控制rgba(0,0,0,0.2)） -
background: none—— 清除所有背景（色、图、渐变、重复等），比transparent更彻底；但注意它也会干掉background-image，慎用于已有背景图的列表项
避免误用 opacity 导致文字也变透明
新手常犯错误：用 opacity: 0.5 想让
立即学习“前端免费学习笔记（深入）”；
真正需要“仅背景透明、内容不透明”时，必须用 background-color 相关属性，而非 opacity。
li { background-color: rgba(255, 255, 255, 0.1); /* 轻微白底，文字保持 100% 不透明 */ /* ❌ 不要这样： opacity: 0.1; → 文字、图标、伪元素全变淡，不可逆 */ }透明背景下文字可读性容易被忽略
设成 transparent 后，
- 父级
background: linear-gradient(...)，但子background-color，导致部分区域文字叠在深色渐变上发虚 - 页面启用了暗色模式，而
color写死为#333，在黑色背景下看不见 - 滚动时，背景是动态视频或 canvas，文字缺乏对比度保障
建议搭配 color-scheme、@media (prefers-color-scheme: dark) 或 CSS 自定义属性做兜底，别只盯着“透明”本身。