基於CSS類別在另一個基礎上添加圖像

我在我的網站的其中一個頁面上有一堆img標籤。我希望能夠以這樣的語句的情況下施加到其基於CSS類別在另一個基礎上添加圖像

幾個基於CSS類這些圖像的頂部添加下面

<img src="image_path"/> 
<img class="newclass" src="image_path"/>

我想另一個圖像添加的自定義圖像第二張圖片的頂部，第一張圖片上沒有任何內容。

我可以使用CSS來做到這一點嗎？

謝謝。

爲什麼我想這樣做，這樣

我可以做到這一點使用2個img標籤。但是，通過僅向img標籤添加類名稱，而不是在將來添加另一個img標籤本身，對我來說更容易進行更改並添加更多圖像。

來源

2011-06-06 lostInTransit

不，你不能用純CSS做到這一點，只有一個img元素。

:after是你會使用，但doesn't work for img elements：

注意。本規範並沒有完全定義：之前和之後的：用替換後的元素（例如HTML中的IMG）。將在未來規範中更詳細地定義。

您可能通過添加含元素，並使用上:after做到這一點。

它的作品「無處不在」http://caniuse.com/#feat=css-gencontent - 除IE7外。

無論出於何種原因，:after的這種特定用法在IE8中也不起作用。它終於在IE9中工作。

http://jsfiddle.net/AQHnA/

<div class="newclass"><img src="http://dummyimage.com/100x100/ccc/fff" /></div> 

.newclass { 
    position: relative; 
    float: left 
} 
.newclass img { 
    display: block 
} 
.newclass:after { 
    background: url(http://dummyimage.com/32x32/f0f/fff); 
    width: 32px; 
    height: 32px; 
    display: block; 
    content: ' '; 
    position: absolute; 
    bottom: 0; 
    right: 0 
}

來源

2011-06-06 10:41:18 thirtydot

所以我不得不使用另一個img標籤？謝謝 – lostInTransit 2011-06-06 10:47:20

很多，是的。我更新了你的答案，你會怎麼做，但是缺乏IE7/8的支持使得它在我看來毫無用處。 – thirtydot 2011-06-06 10:59:19

'：之後'不需要。看看我的答案。 – Midas 2011-06-06 11:06:59

這是最好有相關圖片的父元素。這是你如何可以鏈接（或任何其他元素）做到這一點：

.newclass { 
    background:url(2.jpg) no-repeat; 
    display:inline-block 
} 
.newclass img { 
    position:relative; 
    z-index:-1 
} 

<a href="#"><img src="1.jpg" /></a> 
<a class="newclass" href="#"><img src="1.jpg" /></a>

這在IE5.5，IE6，IE7，IE8和Safari 5（瀏覽器我測試）工作正常。

編輯： thirtydot注意到，如果您有一個背景顏色的父容器（因爲圖像上的z-index），這不起作用。看評論。

來源

2011-06-06 11:05:33 Midas

這是一個不錯的主意，但'z-index：-1'會回來，並擰你，硬：http://jsfiddle.net/WjZxZ/ – thirtydot 2011-06-06 11:16:05

該死的吸... – Midas 2011-06-06 11:25:35

看來，我找不到任何解決這個問題。它可以在沒有容器的頁面上工作，但... – Midas 2011-06-06 11:37:28

基於CSS類別在另一個基礎上添加圖像

回答

相關問題