为什么这种背景颜色没有覆盖我的图像？

Question

我的照片需要这种粉红色的光芒。这是我现在的代码...有人对此有解决方案吗？发光需要在我的图像上方，而不是像现在这样在图像下方。

.afbeelding img {
    border-radius: 50%;
    border: 5px solid #a81932;
}

.paarsegloed {
    border-radius: 50%;
    background-color: rgba(168, 25, 50, 0.5);
    position: relative;
    z-index: 100;
    
}

<div class="paarsegloed">
<div class="afbeelding">
<img src="https://www.buromac.com/sites/default/files/public/images/product/be-nl/650901_1.jpg" style="">
</div>
</div>

图片大小不用管，举个例子。我只需要在图片上得到这个背景颜色，而不是像现在这样在它下面。

亲切的问候，乔恩·巴克霍夫

Answer 1

以你目前的 html，你不能。试试这个

.afbeelding img {
  border-radius: 50%;
  border: 5px solid #a81932;
}

.afbeelding:before {
  content: '';
  border-radius: 50%;
  background-color: rgba(168, 25, 50, 0.5);
  position: absolute;
  z-index: 100;
  height: 300px;
  width: 100%;
}

<div class="paarsegloed">
  <div class="afbeelding">
    <img src="https://www.buromac.com/sites/default/files/public/images/product/be-nl/650901_1.jpg" style="">
  </div>
</div>

Answer 2

一种解决方案是将 paarsegloed 移动到 afbeelding 中，然后使用绝对位置，但这似乎不是真正的 afbeelding 背景。

.afbeelding img {
    border-radius: 50%;
    border: 5px solid #a81932;
    float: left;
}

.paarsegloed {
    border-radius: 50%;
    background-color: rgba(168, 25, 50, 0.5);
    position: absolute;
    z-index: 100;
    width: 500px;
    height: 500px;
}

   
<div class="afbeelding">
<img src="https://www.buromac.com/sites/default/files/public/images/product/be-nl/650901_1.jpg" style="">
<div class="paarsegloed">
</div>
</div>

为什么这种背景颜色没有覆盖我的图像？

Why does this background color not go over my image?

html

css

background

image

z-index