最稳妥方式是用 background-color: transparent；#rrggbbaa 等透明色兼容性差、语义弱；禁用 opacity 以免内容整体变淡；需兼顾父背景与文字可读性。
直接让 <ul></ul> 或 <li> 背景透明，最稳妥的方式是用 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 想让 <li> “半透明”，结果文字、边框、子元素全部变淡。这不是背景透明，而是整个元素及其后代整体降不透明度。
立即学习“前端免费学习笔记（深入）”；
真正需要“仅背景透明、内容不透明”时，必须用 background-color 相关属性，而非 opacity。
li {
background-color: rgba(255, 255, 255, 0.1); /* 轻微白底，文字保持 100% 不透明 */
/* ❌ 不要这样：
opacity: 0.1; → 文字、图标、伪元素全变淡，不可逆 */
}透明背景下文字可读性容易被忽略
设成 transparent 后，<li> 完全“消失”背景，此时文字颜色是否还能看清，完全取决于父容器背景（可能是图片、渐变、滚动内容）。常见翻车点：
- 父级
<ul></ul>用了background: linear-gradient(...)，但子<li>未设background-color，导致部分区域文字叠在深色渐变上发虚 - 页面启用了暗色模式，而
color写死为#333，在黑色背景下看不见 - 滚动时，背景是动态视频或 canvas，文字缺乏对比度保障
建议搭配 color-scheme、@media (prefers-color-scheme: dark) 或 CSS 自定义属性做兜底，别只盯着“透明”本身。
