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

Posted 2023-02-16

【中文标题】CSS：使用带有 css 伪类的图像精灵 :before 和 :after

【英文标题】：CSS: using image sprites with css pseudo classes :before and :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".

【参考方案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 的边框将帮助你理解不同的定位:)