CSS - 是否有可能使用僞元素來包裝具有背景的圖像？

-1

我們有一般編碼一些像這樣的HTML模板：CSS - 是否有可能使用僞元素來包裝具有背景的圖像？

<div class="image"> 
    <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png" height="50" width="100"/> 
    <div class="credit">credit</div> 
    <div class="caption">caption</div> 
</div>

爲了清楚起見：一個.image div包含一個img的元素，也包含.credit和.caption的div

這裏就是我的問題進來。我們的設計規範有一個背景圖像適用於img元素 - 應該是包含框的全寬。我的自由職業者將模板編碼爲錯誤，並將背景應用於整個.image div - 包括元數據（標題和信用）。直到現在，當我們切換出背景圖像時，我都沒有注意到這一點。

我想知道是否有任何方法使用CSS僞元素來解決這個問題。我試着玩了一下，但我什麼都做不了。

雖然我可以重新編寫所有的模板類似下面，我想，以避免它：

<div class="image"> 
    <div class="image-backgrounded"> 
     <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png" height="50" width="100"/> 
    </div> 
    <div class="image-meta"> 
     <div class="credit">credit</div> 
     <div class="caption">caption</div> 
    </div> 
</div>

我扔了的jsfiddle網上顯示的問題 - http://jsfiddle.net/jHmR7/2/

來源

2014-05-23 Jonathan Vanasco

我認爲將div與figure和figcaption元素交換將會在開發方面過於昂貴並且出乎意料。 – BoltClock

使用僞元素來顯示動態內容？不好聞。他們不是DOM的一部分。 –

我想這些圖像並不都具有相同的高度嗎？網站背景怎麼樣纔有純色？ –

.image { 
    width: 400px; 
    min-height: 100px; 
    text-align: center; 
} 
.image img { 
    background: #CCC; 
    padding: 0px 37%; // adjust padding to fit properly based on image size 

}

假設：圖像的寬度相同

如果不是圖像必須調整到相同的寬度，這個技巧可以正常工作。

.image img { 
     background: #CCC; 
     padding: 0px 37%; // adjust padding to fit properly based on image size 
     width : 40%; // define fixed width for images 
    }

來源

2014-05-23 17:04:29 mohamedrias

CSS - 是否有可能使用僞元素來包裝具有背景的圖像？

回答

相關問題