javascript - 如何在 css 中制作 1 个图像 block ？

Question

我怎样才能使 100 x 100 的图像在整个网页上重复出现。我希望图像能够 self 复制并填满屏幕。

例如假设我有这张照片:

我希望它看起来像这样:

间距并不重要，但我该怎么做呢？

Answer 1

您可以在 CSS 中使用重复的背景图片。然后您可以使用 background-size 控制图像的大小。

body {
    background: url('/image/LtCRM.png') center center repeat;
    background-size: 2em;
}

代码笔:http://codepen.io/oculusriff/pen/VmZdzg

编辑:根据 nicovank 的评论 - 如果您是 CSS 新手，这里是上述代码的分离版本。

body {
    background-image: url('/image/LtCRM.png');
    background-position: center center;
    background-repeat: repeat;
    background-size: 4em;
}