There is a black background behind my list item and I want it to be transparent

Question

There is an image behind this list, how do I style the list correctly so there is no black background behind it?

<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>

Here are my styles:

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;
}

I use rgba(0,0,0,0) yet behind the text there is a black background rather than transparent.

Answer 1

Check the styles of all the parents or give a desired background color on ul