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

Question

我有一个 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;
}

<div class="world"></div>

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

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

Note, this exemplary spritesheet is only an example. The actual spritesheet is a little more complicated. Replacing the spritesheet with CSS code is not a solution.

Answer 1

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

只需将 viewBox 编辑为 select 您想要的模式（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>

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

Use part of CSS-Sprite as repeated background image

css

web-component

css-sprites

background-position