この背景色が私のイメージを超えないのはなぜですか？

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>

いけない厥ほんの一例として、画像のサイズ、についてわざわざ。私はちょうど絵の上にこの背景色を取得する必要があります、それは今の通りです。あなたの現在のHTMLで

敬具、 ジョーンBarkhof

Answer 1

、あなたがすることはできません。試してみてくださいこの

.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

一つの解決策は、絶対位置を使用して、その後、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>