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，但是内部的精灵图应该从-26px开始，这样就可以显示第二个图标。

按照我现在的方式，是否可能使用CSS实现这一点？

- matt

---

您能展示一下您目前的 http://jsfiddle.net/ 演示吗？据我所知，:before 不能与 img 元素一起使用：http://jsfiddle.net/thirtydot/CWXS3/。因此，您的问题有些令人困惑。 - thirtydot

我编辑了我的问题，改成了.element而不是img。只是想让它更容易理解。不知道它不能与img一起使用。 - matt

好的，那很有道理。你得到的答案是正确的。看一下这个链接：http://tinyurl.com/so-hints。我喜欢这部分：“不要给我类似于真正代码但明显不是真正代码的代码”。 - thirtydot

Answer 1

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

一个可行的演示：

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

- Tatu Ulmanen

Answer 2

对于标签，大多数浏览器支持的:before和:after伪元素有限或者不存在。

最佳方案是将放入

中，然后将类应用于实际

而不是。

你几乎正确地使用了伪元素。你可以试一下这个：

.somediv { position:relative;}

.somediv:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  top: 0;
}

.somediv.foo1:before { 
  background: url("../images/sprite.png") no-repeat -2px -2px;
  left: 0;
}

.somediv.foo2:before { 
  background: url("../images/sprite.png") no-repeat -2px -28px;
  right: 0;
}

使用background:属性而不是content:属性，这样您就可以在:before伪元素中定位精灵。

对于伪元素相对于其父元素(.somediv)的绝对定位，应使用left:;、right:;和top:;。

在伪元素周围放置一个1像素的边框将有助于您了解不同的定位方式 :)

- Larry