Question

我想知道以下是否可以实施：

说，我有一个大小为20x20像素的图像，在我的网站上我有一个750x500像素的div，我想把图像作为整个div的背景。我尝试通过重复图像来做到这一点，但重复不起作用。在这种情况下，背景似乎是扭曲的。有没有其他方法可以做到这一点？我在互联网上搜索但没有出现。

![please check the image][1]

please check the image

Answer 1

这是你要问的吗？ http://jsbin.com/xuxeci/1/edit

<body>
  <div></div>
</body>

div {
  width: 750px;
  height: 500px;
  background-image: url(http://placekitten.com/20/20);
}

默认情况下，上述背景图片会在x和y尺寸中重复出现。这可以通过应用background-repeat-x: no-repeat，background-repeat-y: no-repeat或背景重复：无重复(that last one applying to both x and y`来限制。

background-repeat的文档：http://devdocs.io/css/background-repeat

如果您不想重复（平铺）图像，而是将其拉伸以填充div，则可能需要选择更大的图像（大于20 x 20像素，以避免像素化），并执行此操作：http://jsbin.com/xuxeci/2/edit

div {
  width: 750px;
  height: 500px;
  background-image: url(http://placekitten.com/2000/2000);
  background-size: cover;
  background-position: center;
}

background-size的文档：http://devdocs.io/css/background-size background-position的文档：http://devdocs.io/css/background-position

您已添加了屏幕截图，并询问您为什么会看到网格模式。那是因为你正在平铺不对称的图像（边缘不匹配）。如果你想要背景＆＃34;顺畅＆＃34; （如你所述），为什么不使用背景颜色？您可以命名颜色（如gray）或使用十六进制代码：http://jsbin.com/picep/1/edit

<body>
  <div></div>

div {
  width: 750px;
  height: 500px;
  background-color: #5e5e5e; /* One of many hex-code combinations for a medium grey. */
}

通过重复制作带有小图像的div的背景

1 个答案: