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

【问题标题】：CSS: using image sprites with css pseudo classes :before and :afterCSS：使用带有 css 伪类的图像精灵 :before 和 :after
【发布时间】：2011-10-27 06:17:40
【问题描述】：

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

我有一个元素位于 div.something 或 div.anything 中。根据它所在的班级，我想在左侧或右侧添加一个角帽。

因此，我将 .element 相对定位，将 :before 伪类应用于 img 并将其绝对定位，高度和宽度为 26px，因此只有一个精灵图标适合。我还应用“溢出” :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;
}

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

所以实际上“蒙版”应该定位在-2px，-2px，但是里面的精灵img应该从-26px开始，所以第二个图标会显示出来。

我现在正在做的 css 是否可以做到这一点？

【问题讨论】：

你能展示一个jsfiddle.net 演示你目前所拥有的吗？据我所知，:before 不适用于img 元素：jsfiddle.net/thirtydot/CWXS3。所以，你的问题相当混乱。
将我的问题编辑为 .element 而不是 img。只是想让它更容易理解。不知道它不适用于 img
嗯，这是有道理的。你得到的答案是正确的。读一读：tinyurl.com/so-hints。我喜欢这部分："Don't give me code which is "something like" the real code but which clearly isn't the real code".

标签： css sprite css-sprites pseudo-class

【解决方案1】：

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

一个工作演示：

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

【讨论】：

【解决方案2】：

对 img 标签上的 :before 和 :after 伪元素的支持是有限的，如果在大多数浏览器上都存在的话。

最好的解决方案是将你的 img 放在一个 div 中，然后将类应用于实际的 div，而不是 img。

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

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

使用背景:;属性而不是内容：；属性，以便您可以将精灵定位在 :before 伪元素内。

左：;正确的：;和顶部：;应该用于伪元素相对于其父元素 (.somediv) 的绝对定位。

在你的伪元素周围放置一个 1px 的边框将帮助你理解不同的定位:)

【讨论】：