基于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类别在另一个基础上添加图像

回答

相关问题