Question

我的图像尺寸为36px（高度）和32px（宽度）。我正在使用

访问第一个和最后一个5个像素

background-position: 0 0;
background-position: -26px 0px;

将它们放入两个不同的div中，宽度为5px。我总共有三个div（左，中，右）

我现在想要使用图像的中间部分重复自己，宽度为280px。但是，我只想访问6px - 26px之间的图像区域。

IMAGE：

5px     22px    5px
=== =========== ===

我想要css做什么：

DIV

5px                  280px                       5px
=== ============================================ ===

注意：280px只是上图中沿x重复22px的区域！

Answer 1

您必须将精灵的布局更改为以下内容：

-----------------------
-Left Part  Right Part-
-     Middle Part     -
-----------------------

这样，您可以更改y中间部分的background-image坐标，并且应该成功重复。

这是因为您无法重复background-image的特定部分。在这种情况下，宽度/高度必须固定，因为一旦重复一个零件，你就会看到精灵的其他部分。