javascript - 如何将图像放在图像上

Question

无法让它工作。我需要在页面上放置一些图像，然后在我之前放置的每张图像上放置一些默认图像。 这里我在页面上放了一些图片:

tmp = 0;
for(var a = 1; a <= get_height; a++){
    for(var b = 1; b <= get_width; b++){
        document.write("<img src=" + shuffled_mass[tmp] + "class='image'>");
tmp++;
    }
    document.write('\n');
}

它工作正常。但我不能将默认图像放在这些图像之上。 尝试用 css 做到这一点:

.image {
position:relative;
z-index: 1;
}
.image:after {
    z-index: 3;
    background-image: url('/static/test_app/image/default.png');
    height:96px;
    width:96px;
    display:block;
    content: ' ';
    position:absolute;
    left:0;
    top:0;
}

但这没有用。 有人可以帮我解决这个问题吗？

Answer 1

您不能在图像上使用 :after。 看到这个问题:Why don't :before and :after pseudo elements work with `img` elements?

你必须用元素(比方说div)包裹图像并在其上使用:before。

.image {
    display:block;
}

.wrapper {
    display:inline-block;
    position:relative;
}

.wrapper:after {
    z-index: 3;
    background-image: url('/static/test_app/image/default.png');
    height:96px;
    width:96px;
    display:block;
    content: ' ';
    position:absolute;
    left:0;
    top:0;
}