為什么這種背景色不能覆蓋我的圖像？

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

一種解決方案是先在絕對位置內部移動，然后再使用絕對位置，但這似乎並不是真正的絕對位置背景。

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