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元素创建一个带有可选背板（牌匾）的图标，是否可行？

Answer 1

使用多个背景。

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

将z-index应用于：pseudo元素

1 个答案: