在 img 图标后面应用 css 背景

Question

我正在尝试在要导入项目的 img 图标后面应用 css 背景。当尝试这样做时，我应用的 css 背景完全覆盖了图像。我正在尝试将图像设置在背景之上以使其具有边框外观。

我尝试调整 z-index 但没有效果。我还尝试使用添加一个伪类，但它没有显示我应用的 css 背景颜色。

我怎样才能做到这一点？

这里是一些代码示例：

img {
  height:32px;
  width:32px;
  z-index: 500;
}

.background {
  width:40px;
  height:40px;
  background: blue;
opacity: 0.08;
border-radius: 8px;
}

<div class="background">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>

<div class="">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>

我希望图像位于我尝试申请的 background: blue; 的中心。

Answer 1

img {
  height:32px;
  width:32px;
  z-index: 500;
  position: absolute;
  left: 12px;
  top: 12px;
}

.background {
  width:40px;
  height:40px;
  background: blue;
  opacity: 0.08;
  border-radius: 8px;
  position: absolute;
}

<div class="background">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>

<div class="">
<img src='https://i.ibb.co/GRJGJ2V/sharemoney.png'/>
</div>

我只是将位置设置为绝对并设置偏移量。