html - 使用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