如何只重复我的精灵图像的一部分作为div的背景

Question

我需要将我精灵图像的一部分只作为div背景，但结果如下：

我假装这个：

我需要，在我的模板中只使用一个sprite图像（来自我老板的要求）。我需要帮助。

我的HTML：

<div class="background"></div>

我的Css：

.background {width: 100%; 
             height: 166px; 
             background-size: 93px 166px; 
             background: url('library/images/sprites.png') -150px 0px repeat-x; 
            }

Answer 1

不幸的是，如果你想重复x和y，你将不得不制作一个单独的文件。如果你想要x或y，你可以使用下面的内容来帮助指导你[{3}}。

  

repeat-X：你会在你的精灵表中垂直堆叠它们。您   每个“行”只能有一个图像。所有图像必须相同   宽度。

     

repeat-y：你会水平排列图像，只有一个   每个“列”的图像。所有图像必须具有相同的高度。

它不应该太多地损害加载时间！

Answer 2

你只能在一个方向重复精灵。

要水平重复精灵，你需要编辑精灵，这样你想要重复的图像就在其他图像的下面而没有其他任何一面。

然后你提供的代码应该有效（改变位置以适应）。

Answer 3

http://cssspritegenerator.net是一个很好的工具来帮助你，你可以选择重复x或y，并且可以为你想要的任意数量的图像做到这一点。