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;
}

如何将图像放在图像上

1 个答案: