CSS：将图像从图像中的指定位置重复到另一个指定位置

Question

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

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

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

这些被放入宽度为 5px 的两个不同的 div 中。我总共有三个 div（左、中、右）

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

图片：

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

我想让 css 做什么：

DIV

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

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

Answer 1

您必须将精灵的布局更改为如下所示：

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

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

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