CSS：使用带有 css 伪类的图像精灵 :before 和 :after
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7065069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: using image sprites with css pseudo classes :before and :after
提问by matt
I have never tried that before. I created an image sprite that is contains two icons. Each icon is 26px wide and high. So the sprite is 26x52px.
我以前从未尝试过。我创建了一个包含两个图标的图像精灵。每个图标的宽度和高度均为 26 像素。所以精灵是 26x52px。
I have an element that is either in a div.something or in a div.anything. Depending on which class it's in I want to add a corner cap to the left or right.
我有一个元素在 div.something 或 div.anything 中。根据它所在的班级，我想在左侧或右侧添加一个角帽。
So therefore I'm positioning the .element relative, the apply the :beforepseudoclass to the img and position it absolute with a height and width of 26px so only one icon of the sprite fits in. I also apply "overflow:hidden" in order to hide the second icon on the sprite.
因此，因此我将 .element 相对定位，将:before伪类应用于 img 并将其绝对定位，高度和宽度为 26px，因此只有一个精灵图标适合。我还应用了“溢出：隐藏”以便隐藏精灵上的第二个图标。
.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;
}
This works fine for the left-corner where I use the first top icon in the sprite. However now I wonder how I can show only the second icon in the sprite for the "anything .element".
这适用于我在精灵中使用第一个顶部图标的左角。但是现在我想知道如何在精灵中只显示“任何 .element”的第二个图标。
So actually the "mask" should be positioned at -2px, -2px but the sprite img inside should start at -26px so the second icon is shown.
所以实际上“掩码”应该定位在 -2px，-2px 但里面的精灵 img 应该从 -26px 开始，这样第二个图标就会显示出来。
Is this possible with css the way I'm doing it right now?
css 是否可以像我现在所做的那样使用 css？
回答by Tatu Ulmanen
Don't use contentto insert your image, as you cannot modify its position. Instead, set the content to " "and add the sprite as a background image. You can then use the background-positionproperty to move the sprite to the correct position. Otherwise your example should be working just fine.
不要content用于插入图像，因为您无法修改其位置。相反，将内容设置为" "并将精灵添加为背景图像。然后您可以使用该background-position属性将精灵移动到正确的位置。否则你的例子应该工作得很好。
A working demo:
一个工作演示：
回答by Larry
Support for :before and :after pseudo elements on img tags is limited, if at all existent on most browsers.
对 :before 和 :after 伪元素在 img 标签上的支持是有限的，如果在大多数浏览器上都存在的话。
The best solution would be to place your img inside a div, and then have the class applied to the actual div, rather than the img.
最好的解决方案是将您的 img 放在 div 中，然后将该类应用于实际的 div，而不是 img。
You almost have the usage for the pseudo element correct. You can give this a try:
您几乎可以正确使用伪元素。你可以试试这个：
.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;
}
Use the background:; property rather than the content:; property so that you can position the sprite within the :before pseudo element.
使用背景：; 属性而不是内容：; 属性，以便您可以将精灵定位在 :before 伪元素中。
left:; right:; and top:; should be used for absolute positioning of the pseudo element relative to its parent (.somediv).
剩下：; 对：; 和顶部：; 应该用于伪元素相对于其父元素 (.somediv) 的绝对定位。
Placing a 1px border around your pseudo element will help you understand the different positioning :)
在你的伪元素周围放置一个 1px 的边框将帮助你理解不同的定位:)
