使用偽選擇器向圖像添加背景形狀

Question

我有以下代碼

 .about-img-top { padding-top: 39px; padding-left: 95px; } .about-img { padding-top: 39px; padding-left: 30px; } .Rectangle-2-Copy { width: 526px; height: 248px; background-color: #f4f4f4; z-index: -1; bottom: 0; position: absolute; margin-left: 64px; } 

 <div class="col-md-7"> <img src="https://cdn.zeplin.io/588714a1f51baed2b98908bc/assets/C2477822-CF77-4CC3-966D-37305572AC79.png" class="about-img-top img-responsive " alt="payment_gateway_company"> <div class="Rectangle-2-Copy"> </div> </div> 

這工作正常，我不得不在其中添加一個帶有css屬性的空div。

但是，如果不使用空div，我可以這樣做嗎？ 通過添加幾個CSS到圖像自己？

這是我試過的

https://jsfiddle.net/74s293wt/

我是HTML / CSS的新手，我嘗試了幾次谷歌搜索，但沒有幫助。

Answer 1

您可以使用:before或:after插入內容:after如果您不想使用空div 。 嘗試這個：

 .about-img-top { padding-top: 39px; padding-left: 95px; } .col-md-7:before { content: ''; width: 526px; height: 248px; background-color: #c00; z-index: -1; bottom: 0; position: absolute; margin-left: 64px; } 

 <div class="col-md-7"> <img src="https://cdn.zeplin.io/588714a1f51baed2b98908bc/assets/C2477822-CF77-4CC3-966D-37305572AC79.png" class="about-img-top img-responsive " alt="payment_gateway_company"> </div>