在调整列表样式时，明明给容器和列表项都写了 background: transparent，列表项背后还是出现一块黑色背景。这个现象通常不是 transparent 属性失效，而是黑色来自不同的绘制层级：父容器背景色、列表项的半透明图片、点击高亮状态、opacity 创造出来的混合效果，甚至移动端浏览器自身的触摸反馈。要真正实现透明，就需要把黑色背景的来源找出来，并区分元素整体透明与背景色透明这两种完全不同的处理方式。
下面先从最容易混淆的基础概念开始，再给出不同场景下的消除方案。
一、黑色背景最常见的五个来源
第一类来源是父容器或页面根元素的背景色。CSS 中 background-color 本身不会继承，但子元素如果没有自己的背景，或者背景色使用 transparent，视觉上就会露出父容器的颜色。如果 body 或外层 wrapper 设置了 background: #000，列表项即使写了 background: transparent，透过它看到的仍然是黑色。此时需要修改的是外层背景，而不是继续给列表项叠加透明背景。
第二类来源是 opacity 属性造成的整体透明。很多开发者为了把黑色背景变淡，直接给列表项添加 opacity: 0.3。这确实会让黑色变浅，但它作用于整个元素及其所有子元素，文字和图标也会一起变透明，并且浏览器会为 opacity 小于 1 的元素创建层叠上下文，背景合成结果可能与预期不同。更关键的是，opacity 不会移除黑色背景，它只是降低整个元素的不透明度，黑色色块依然存在。
第三类来源是图片素材自身的问题。如果列表项左侧的图标是 JPEG 或者没有 alpha 通道的 PNG，图片矩形边框内原本就是黑色像素，CSS 中的 background: transparent 只能去掉图片元素后面的背景色，无法删除图片内部已经写入的黑色区域。这种情况必须重新导出带透明通道的 PNG 或 WebP 图片。
第四类来源是移动端 WebView 或部分浏览器默认的点击样式。Android 上早期的 WebView 在点击 li 元素时可能绘制深色高亮块，iOS 上也有类似的 tap highlight。这个深色块不是 CSS 背景，而是浏览器原生绘制。需要显式声明 -webkit-tap-highlight-color: transparent 来关闭。
第五类来源是 list-style 标记。当列表使用默认的 disc、square 等标记时，黑色圆点可能被误认为是列表项背后的色块。尤其是把文字颜色改成深色后，标记颜色没有单独设置，会显得像一块黑色背景。可以通过 list-style: none 移除，或者用 ::marker 单独控制标记颜色和背景。
二、background: transparent 与 opacity 的关键区别
background: transparent 只是把元素的背景绘画层清空，不会影响元素内部的前景内容，也不会影响子元素。例如给 li 设置 background: transparent，li 中的文本和 img 依旧保持原来的颜色和不透明度。这种方式适合需要露出父级背景或页面底层纹理的场景，是真正的背景透明。
opacity 则完全不同。opacity 调节的是整个元素的不透明度，包括背景、边框、文字、阴影和子元素。它会让整个元素以一个整体参与合成，所以常常出现设置 opacity 后文字发灰、边界模糊的问题。而且当 opacity 小于 1 时，元素会生成新的层叠上下文，z-index 关系可能变化，背景的混合也会变得更难预测。
下面的代码对比可以帮助理解。错误写法直接让整个列表项变淡，黑色没有消失；正确写法使用带 alpha 通道的 rgba 背景色，只改变背景层。
/* 错误：整个元素透明，文字也变淡，黑色仍存在 */
.list-item {
background: #000;
opacity: 0.35;
}
/* 正确：仅背景半透明，文字保持清晰 */
.list-item {
background: rgba(0, 0, 0, 0.35);
color: #ffffff;
}
如果背景本身应该是完全透明，而不是半透明黑色，那么直接使用 background: transparent 即可。但要注意，如果列表项还有边框、阴影或 outline，这些绘制并不会因为 background 透明而消失。例如 box-shadow 中带黑色，仍然会在透明背景里留下黑边。因此诊断时应依次检查 background、border、box-shadow、outline 和 tap-highlight-color。
三、实现真正透明背景的几种 CSS 写法
对于普通列表，最稳定的做法是容器背景透明，列表项使用 rgba 或 hsla 颜色。rgba 的 alpha 参数只作用于当前元素的背景绘制，不会传递给子元素。若需要毛玻璃效果，则可以给列表容器增加 backdrop-filter，让背景透过来的内容被模糊，同时列表项自身保持透明。
.transparent-list {
background: transparent;
isolation: isolate;
}
.list-item {
background: rgba(255, 255, 255, 0.22);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #222;
}
.list-item:hover {
background: rgba(255, 255, 255, 0.45);
}
如果列表某几项需要完全透明，可以直接写 background: transparent，但必须保证父容器不是黑色。若父容器背景是图片或渐变，透明项会露出这些背景。还可以使用 background-clip 控制背景的裁剪范围，例如 background-clip: padding-box 让背景只填充到内边距框，避免背景渗透到边框区域。
对于需要保留半透明玻璃质感的列表面板，可以这样写：
.list-panel {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.list-panel .list-item {
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
这种写法中，面板提供统一背景和模糊，列表项不再单独设置半透明黑色，从而避免多个半透明层叠加后颜色变深。isolation: isolate 也可以限制混合效果的作用范围，特别是在使用 mix-blend-mode 时，防止列表项与背后内容产生不可控的颜色混合。
四、移动端与图片场景的透明化处理
移动端列表项背后出现黑色块，经常是浏览器默认触摸高亮导致。可以给所有可点击列表项设置 -webkit-tap-highlight-color: transparent，并去掉 outline，但不建议完全移除焦点样式，否则会影响键盘导航。可以在 :focus-visible 下提供替代样式。
.list-item {
-webkit-tap-highlight-color: transparent;
outline: none;
}
.list-item:focus-visible {
outline: 2px solid rgba(0, 120, 255, 0.8);
outline-offset: 2px;
}
如果黑色背景来自图片素材自身，光靠 CSS 无法真正删除像素。最佳方案是用图像工具重新导出带 alpha 通道的 PNG 或 WebP。若临时需要视觉补救，可以考虑 mix-blend-mode，例如将黑色底图通过 lighten 或 screen 模式与浅色背景融合，让黑色部分看起来变淡；但这种方式依赖背景颜色，在深色背景下可能产生新的问题。还可以使用 CSS mask-image 对图片进行遮罩，把黑色区域隐藏。
.icon {
background: transparent;
mix-blend-mode: screen; /* 仅适合浅色背景，用于临时淡化黑底 */
}
.icon-fallback {
background: transparent;
-webkit-mask-image: radial-gradient(circle, #000 60%, transparent 61%);
mask-image: radial-gradient(circle, #000 60%, transparent 61%);
}
另外，如果列表项使用 CSS 渐变模拟透明边界，例如从黑色到透明，视觉上可能会出现灰黑边缘。可以改用带 alpha 的同色插值，或者使用 color-mix 和 oklch 等现代颜色函数生成更均匀的透明渐变，但要注意浏览器兼容性。排查时建议先禁用所有第三方样式，然后在 DevTools 中逐项开关 background、opacity、box-shadow、filter，找到黑色绘制的真正来源。
总之，消除列表项背后的黑色背景，关键是不要盲目堆叠 transparent 或 opacity，而是明确背景穿透路径和元素合成方式。把外层背景、图片通道、浏览器默认样式与透明度属性分开处理，才能得到真正干净、可预期的透明列表效果。