html - 将 z-index 应用于 :pseudo element

Question

我将以下 CSS 规则应用于 DIV:

.icon {
    position:relative;
    display: inline-block;
    width: 90px;
    height: 94px;
    background: url("test-icon-sprite.png") no-repeat scroll transparent;
    background-position: 0 0;
    overflow: hidden;
    z-index: 1000;
}
.icon.plaque:after {
    content: url("test-icon-plaque.png");
    position:absolute;
    width: 90px;
    height: 94px;
    z-index: 1
}

...

<div class="icon plaque"></div>

发生的情况是伪元素中的图像位于另一个元素中的图像之上。那不是我想要的!有什么办法可以解决这个问题吗？

我的目标是仅使用一个 html 元素创建一个带有可选背板(斑 block )的图标，是否可行？

Answer 1

使用多个背景。

.icon {
    background-image: url(test-icon-sprite.png);
}
.icon.plaque {
    background-image: url(test-icon-sprite.png), url(test-icon-plaque.png);
}