CSS:使用带有css伪类的图像精灵:before和:after

Question

我以前从未尝试过.我创建了一个包含两个图标的图像精灵.每个图标宽26px.所以精灵是26x52px.

我有一个div.something或div.anything元素.根据它所在的课程,我想在左侧或右侧添加角帽.

因此,我正在定位.element相对,将:before伪类应用于img并将其置于绝对位置,高度和宽度为26px,因此只有精灵的一个图标适合.我还应用"overflow:hidden"以便隐藏精灵上的第二个图标.

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

这适用于左角,我使用精灵中的第一个顶部图标.但是现在我想知道如何只在精灵中显示"任何.element"中的第二个图标.

所以实际上"掩码"应该定位在-2px,-2px但是里面的精灵img应该从-26px开始,所以显示第二个图标.

这可能与我现在这样做的方式有关吗？

Answer 1

不要content用于插入图像,因为您无法修改其位置.而是将内容设置为" "并将精灵添加为背景图像.然后,您可以使用该background-position属性将精灵移动到正确的位置.否则你的例子应该工作得很好.

一个工作演示:

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