Question

我的网站上的其中一个页面上有一堆img标记。我希望能够根据应用于它们的css类在这些图像中添加自定义图像

如果是以下陈述

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

我希望在第二张图像的顶部添加另一张图像，而在第一张图像上没有任何内容。

我可以使用CSS吗？

感谢。

为什么我要这样做

我可以使用2个img标签来完成此操作。但是，通过在img标签中添加类名而不是在将来添加另一个img标签，我可以更轻松地进行更改并添加更多图像。

Answer 1

不，你只能用一个img元素在纯CSS中完成。

:after是您使用的内容，但是doesn't work for img elements：

请注意。该规范没有完全定义的互动：之前和之后：更换后元素（例如HTML中的IMG）。这个将在a中更详细地定义未来的规范。

你可以通过添加一个包含元素并在其上使用: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），这不起作用。见评论。

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

2 个答案: