基于CSS类别在另一个基础上添加图像

Question

我在我的网站的其中一个页面上有一堆img标签。我希望能够以这样的语句的情况下施加到其

几个基于CSS类这些图像的顶部添加下面

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

我想另一个图像添加的自定义图像第二张图片的顶部，第一张图片上没有任何内容。

我可以使用CSS来做到这一点吗？

谢谢。

为什么我想这样做，这样

我可以做到这一点使用2个img标签。但是，通过仅向img标签添加类名称，而不是在将来添加另一个img标签本身，对我来说更容易进行更改并添加更多图像。

Answer 1

不，你不能用纯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 
} 

Answer 2

这是最好有相关图片的父元素。这是你如何可以链接（或任何其他元素）做到这一点：

.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），这不起作用。看评论。