为什么这种背景颜色不会覆盖我的图像？答案

【问题标题】：Why does this background color not go over my image?为什么这种背景颜色不会覆盖我的图像？
【发布时间】：2017-10-27 00:16:04
【问题描述】：

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

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

不要在意图片的大小，这只是一个例子。我只需要在图片上加上这个背景颜色，而不是像现在这样。

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

【问题讨论】：

背景是一个背景，你不能让它显示在前面后代元素。您需要首先将包含背景的元素放在图像上，这意味着它们不能像那样嵌套。
我以前用过这样的，通常在我工作的 CMS 中可以这样，在图像上使用背景。

标签： html css image background z-index

【解决方案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>

【讨论】：

【解决方案2】：

一种解决方案是在 afbeelding 内移动 paarsegloed，然后使用绝对位置，但这似乎不是 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>

【讨论】：