html - 根据 CSS 类在另一个图像之上添加图像

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 :

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

---

您可以通过添加一个包含元素并在其上使用: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
}