使用僞選擇

添加背景形狀的圖像，我有以下代碼使用僞選擇

.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，我已經試過幾個谷歌搜索，但沒有幫助。

來源

2017-05-04 Savitha

喜歡這個？ https://jsfiddle.net/74s293wt/2/ – Santi

@Santi編號我的小提琴生成的輸出是正確的。但我想實現它使用CSS而不是一個空的div – Savitha

正確...看看我的小提琴中的HTML。空格不在那裏，輸出與你的相同。 – Santi

你可以使用:before或: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>

來源

2017-05-04 14:54:03

回答

相關問題