CSS:将图像 Sprite 与 css 伪类 :before 和 :after 结合使用

Question

我以前从未尝试过。我创建了一个包含两个图标的图像 Sprite 。每个图标的宽度和高度均为 26 像素。所以 Sprite 是 26x52px。

我有一个元素在 div.something 或 div.anything 中。根据它所在的类别，我想在左侧或右侧添加一个 Angular 帽。

因此，我将 .element 相对定位，将 :before 伪类应用于 img 并将其绝对定位，高度和宽度均为 26px，因此只有一个 Sprite 图标适合.我还应用了“overflow:hidden”来隐藏 Sprite 上的第二个图标。

.element {
    position:relative;
}

.element:before{
    content: url("../images/sprite.png");
    position: absolute;
    height:26px;
    width:26px;
    overflow:hidden;
}

.something .element:before {
    top: -2px;
    left: -2px;
}

anything .element:before {
    top: -28px;
    right: -2px;
}

这对于我在 sprite 中使用第一个顶部图标的左 Angular 效果很好。 但是现在我想知道如何在 Sprite 中只显示“任何元素”的第二个图标。

所以实际上“ mask ”应该位于 -2px，-2px 但里面的 sprite img 应该从 -26px 开始所以显示第二个图标。

我现在正在做的 css 有可能吗？

Answer 1

不要使用content 来插入您的图片，因为您无法修改它的位置。相反，将内容设置为 "" 并将 Sprite 添加为背景图像。然后，您可以使用 background-position 属性将 Sprite 移动到正确的位置。否则，您的示例应该可以正常工作。

一个工作演示:

http://jsfiddle.net/RvRxY/1/