列表项背景无法透明求助：如何去除黑色背景显示底层图片

我希望列表项背景透明，让后方的图片能够显示出来，但设置background-color: rgba(0, 0, 0, 0)后，列表文字后方仍显示黑色背景。以下是我的HTML和CSS代码：

HTML代码 #

<div>
  <img src="image.png">
  <ul>
    <li id="1"> 1 </li>
    <li id="2"> 2 </li>
    <li id="3"> 3 </li>
    <li id="4"> 4 </li>
  </ul>
</div>

CSS代码 #

li {
    text-align: center;
    font-weight: 900;
    font-size: 50px;
    color: white;
    background-color: rgba(0, 0, 0, 0);
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
}

解决步骤 #

1. 排查背景来源：黑色背景大概率不是来自li本身，而是继承自父元素（比如ul或外层div）。给ul也添加透明背景设置：

   ul {
       /* 保留原有样式 */
       background-color: transparent;
   }
   

2. 简化透明写法：transparent和rgba(0,0,0,0)效果完全一致，直接替换更清晰：

   li {
       /* 保留原有样式 */
       background-color: transparent;
   }
   

3. 修正定位上下文：当前ul的绝对定位是相对于整个文档，外层div未设置相对定位的话，列表可能脱离图片所在容器。给外层div添加相对定位，确保列表叠加在图片上方：

   div {
       position: relative;
   }
   

4. 清除默认样式：浏览器默认的列表圆点可能在部分场景下带有背景，可直接去掉：

   ul {
       /* 保留原有样式 */
       list-style: none;
   }
   

修改后的完整CSS #

div {
    position: relative;
}

li {
    text-align: center;
    font-weight: 900;
    font-size: 50px;
    color: white;
    background-color: transparent;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    background-color: transparent;
    list-style: none;
}

这样设置后，列表项和列表容器的背景都完全透明，会正确显示后方的图片。

内容的提问来源于stack exchange，提问作者jomosh