使用 CSS-Sprite 的一部分作为重复的背景图片答案

【问题标题】：Use part of CSS-Sprite as repeated background image使用 CSS-Sprite 的一部分作为重复的背景图片
【发布时间】：2019-07-24 23:02:25
【问题描述】：

我有一个div，宽度和高度约为300px。这个div的背景应该用一个8px宽和8px高的小图像反复填充。这个较小的图像被嵌入到一个较大的精灵图像中。怎么只能用这个8x8像素瓦来铺背景呢？

到目前为止我已经尝试过：

.world {
  width: 300px;
  height: 300px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wcYFjsX3EPV0QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAxklEQVQ4y+2UsQ3CMBBF/0VImYDKFWNQZB28AwOwQ7KOC8agomKCVJ8ituU7GwkhVxFXWT+nF8nvy0JSRFAMye0wqRghxrheTmV+Wx4A9G7BmlpfAi0lswZ0mj2DsiNjLbBx09lRw1oN+m0OAKB7hIQWvFSM43ZY5V7mI88AhB+KZCiZZSiZ9e/RN6BaP1k6MtY2Ry1rPXv01D1yET3qR2ZF+qXX+zMBDJaSuGP1VMXEV/te9q6/G8hV+h2VI2NtrvZn9uzRGzl9Uzsn2uDrAAAAAElFTkSuQmCC') 0 -16px repeat;
}

&lt;div class="world"&gt;&lt;/div&gt;

在这个示例代码中，shritesheet 的宽度和高度分别为24px。它包含 9 个不同颜色的点，每个点的直径为7px。

我希望只有一个点被重复用作 div 的背景。但是，在这段代码中，整个图片是从第三行点开始重复的。

注意，这个示例精灵表只是一个示例。实际的 spritesheet 稍微复杂一些。更换精灵表使用 CSS 代码不是解决方案。

【问题讨论】：

没有简单的解决方案可以做到这一点，但既然它们是简单的彩色点，为什么不使用你重复的径向渐变？
不幸的是，实际的 spritesheet 比点要复杂一些。这些只是一个例子。因此radial-gradient 无法解决实际问题。
基本上你不能，CSS不允许你剪切图像并将其作为模式重复，除非我们考虑一些黑客来近似这个
好的，我明白了。谢谢。因此，我只需要为仅包含 8x8 像素正方形的背景使用专用 spritesheet。
您对 SVG 持开放态度吗？我想这是可行的

标签： css web-component css-sprites background-position

【解决方案1】：

一个想法是将 SVG 视为背景。诀窍是在 SVG 中制作图像并依靠 viewbox 剪切图像并仅显示需要的部分，然后使整个 SVG 成为您的背景图案。

只需编辑viewBox 以选择您想要的模式（x y 8 8 其中x,y 等于[0,8,16]）

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
}

.one {
  background: url('data:image/svg+xml;utf8,<svg viewBox="16 0 8 8" width="8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wcYFjsX3EPV0QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAxklEQVQ4y+2UsQ3CMBBF/0VImYDKFWNQZB28AwOwQ7KOC8agomKCVJ8ituU7GwkhVxFXWT+nF8nvy0JSRFAMye0wqRghxrheTmV+Wx4A9G7BmlpfAi0lswZ0mj2DsiNjLbBx09lRw1oN+m0OAKB7hIQWvFSM43ZY5V7mI88AhB+KZCiZZSiZ9e/RN6BaP1k6MtY2Ry1rPXv01D1yET3qR2ZF+qXX+zMBDJaSuGP1VMXEV/te9q6/G8hV+h2VI2NtrvZn9uzRGzl9Uzsn2uDrAAAAAElFTkSuQmCC" x="0" y="0" height="24" width="24" /></svg>')  repeat;
}
.two {
  background: url('data:image/svg+xml;utf8,<svg viewBox="16 8 8 8" width="8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wcYFjsX3EPV0QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAxklEQVQ4y+2UsQ3CMBBF/0VImYDKFWNQZB28AwOwQ7KOC8agomKCVJ8ituU7GwkhVxFXWT+nF8nvy0JSRFAMye0wqRghxrheTmV+Wx4A9G7BmlpfAi0lswZ0mj2DsiNjLbBx09lRw1oN+m0OAKB7hIQWvFSM43ZY5V7mI88AhB+KZCiZZSiZ9e/RN6BaP1k6MtY2Ry1rPXv01D1yET3qR2ZF+qXX+zMBDJaSuGP1VMXEV/te9q6/G8hV+h2VI2NtrvZn9uzRGzl9Uzsn2uDrAAAAAElFTkSuQmCC" x="0" y="0" height="24" width="24" /></svg>')  repeat;
}

.three {
  background: url('data:image/svg+xml;utf8,<svg viewBox="8 0 8 8" width="8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wcYFjsX3EPV0QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAxklEQVQ4y+2UsQ3CMBBF/0VImYDKFWNQZB28AwOwQ7KOC8agomKCVJ8ituU7GwkhVxFXWT+nF8nvy0JSRFAMye0wqRghxrheTmV+Wx4A9G7BmlpfAi0lswZ0mj2DsiNjLbBx09lRw1oN+m0OAKB7hIQWvFSM43ZY5V7mI88AhB+KZCiZZSiZ9e/RN6BaP1k6MtY2Ry1rPXv01D1yET3qR2ZF+qXX+zMBDJaSuGP1VMXEV/te9q6/G8hV+h2VI2NtrvZn9uzRGzl9Uzsn2uDrAAAAAElFTkSuQmCC" x="0" y="0" height="24" width="24" /></svg>')  repeat;
}

<div class="box one"></div>

<div class="box two"></div>

<div class="box three"></div>

【讨论】：

当你打算用 JS 生成它时的一些提示（我在自定义元素 PlayingCardts 和 Chessly 中大量使用 SVG 在 data-uris 中）► 用单引号替换 SVG 中的双引号，将字符串构建为 ` `（模板文字字符串），因为在某些时候您（可能）需要该双引号用于其他目的。你可以在xlink:href 上保存字节，只需href 参见MDN docs HTH
这是一个非常有趣的建议！谢谢！ :)