在使用css的html列表的背景颜色顶部的图像

Question

我想使用css在html列表的颜色背景上强加一个图像（具有透明度）。

目前我这样做：

ul li.myclass {
  background: #ddd;
  background-image: url('/w3images/myimage.png') no-repeat left;
}

<ul>
    <li class="myclass"> example </li>
</ul>

但这只显示颜色而不是图像。

Answer 1

应该是

ul li.myclass {
    background: #ddd url('/w3images/myimage.png') left no-repeat;
}

如果图像是透明的和/或没有覆盖整个区域，则颜色起作用。例如：

body {
   background:#ddd url('https://images.vexels.com/media/users/3/139694/isolated/lists/ef87f11007e9a062a4cf7f004fbe5443-bird-silhouette-4.png') left top no-repeat;
}

MDN