Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

不要担心图片的大小，这就是一个例子。我只需要在图片上获得这种背景颜色，而不是现在的颜色。

亲切的问候， Jorn Barkhof

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

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

2 个答案: