Question

.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

图像是32x32像素的图标。现在这是来自w3schools：

默认情况下，背景图像位于一个左上角元素，并在垂直和水平方向重复。

background-size属性仅指定宽度，高度为auto，因此如何知道我的代码是否会重复背景？在这里它可以垂直重复它。在这里的代码中重复它：

<div class="tiledBackground">
</div>

.tiledBackground {
  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

这里宽度设置为150px，但高度也是自动的，那么为什么它不会拉伸图像？该图像是2982x2808 Firefox徽标。

Answer 1

如果您将容器的宽度/高度设置得更大或使背景尺寸更小（使背景尺寸为32px（或者如果您实际上只是想要它，则可以删除该属性），32x32图标将会重复作为图像的默认大小）：

.square2 {
  background-image: url(favicon.png);
  background-size: 32px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

同样，您发布的第二个示例的工作方式相同，但在300x300px容器中将背景图像设置为150px宽度。

要仅垂直重复使用：

background-repeat: repeat-y;

Answer 2

默认情况下，背景图像设置为重复。但要在具有固定高度和宽度的div内重复背景图像，您可以：

选择一个小于div的宽度和高度的图像。
将background-size定义为小于div的宽度和高度的值。

在这里，我还要添加背景大小：300px auto;或者只是背景大小：300px;将填充div的完整背景而不重复它因为尺寸自动将始终保持图像的实际尺寸的宽高比。

在第一种情况下，您的图像尺寸为32X32像素，因此背景尺寸：300像素自动;将使背景大小：300px 300px;

在第二种情况下，您的图像尺寸为2982X2808像素，背景尺寸为150像素。它将显示重复的背景图像，每个图像的大小为150X141像素。

希望得到这个帮助。

为什么这个CSS代码不重复背景？

2 个答案: