CSS精灵地图剪切片段背景

Question

我有一个精灵地图。在该精灵映射中，我需要使用1x1px片段来创建元素的背景（即重复）。

CSS单独提供解决方案吗？我很感兴趣，即使它是未来主义的，只能在IE12中使用。对于那些不知道精灵地图是什么的人，我附上了一个例子。

https://static.anuary.com/9429dc4e7a395b6443ae58919f1416523a9a798dd54931cb0e5ed70c582766a4/public/images/sprite.png

Answer 1

我不知道一种特殊的方法可以让你剪辑一部分图像，将其作为元素的背景进行平铺。由于您只有1px x 1px片段，为什么不使用标准background-color属性或为此目的保留单独的图形？我更喜欢background-color CSS属性，因为您似乎处理的是纯色。

您也可以转到CSS3.info查看即将发生的事情。

Answer 2

您可以尝试使用CSS before或after伪元素，而不是使用占位符标记

.icon::after {
    position:relative;
    display:inline-block;
    overflow:hidden;
    content:" ";
    width:21px;
    height:24px;
    background:url(images/icons.png) -1000px -1000px no-repeat;
}
.icon::after {
    background-position: -14px -24px;
}