如何修复背景附件？

Question

设置background-attachment fixed时，我对背景图片有一些疑问。这些是：

1. 假设我将背景图像设置为宽度为500px且高度为500px且具有1px纯红色边框的div。现在，如果我给background-size: 100% 100%。为什么背景图像的大小略大于500px？为什么在更改视口大小时背景图像的大小会发生变化？

2. 如何为背景图像指定最小高度，以便当veiwport的尺寸发生变化时，背景图像不会小于特定高度？

Answer 1

如果背景为fixed，则其相对于body元素，这就是为什么设置100% 100%的大小会导致宽度大于应用了图像的div的宽度的原因。它将等于正文width而不是div。

如果您想设置固定的height而不是只需要在px中进行设置，但在这种情况下，图片不会保存其比例：

div {
  background: url(//c6.staticflickr.com/8/7389/26907631325_f8b05bb68d_c.jpg) fixed left top/100% 433px no-repeat;
  width: 800px;
  height: 433px;
}

html {
  height: 10000px;
}

<div>
  
</div>

Answer 2

1. 您的图片略大于500像素，因为边框被视为图像的一部分。使用此方法，您的背景图片将为502x502。

2. 根据您的背景适当性，您可以指定最大宽度和最大高度，以使图像不会小于选定的像素数。

  

为什么在更改视口大小时背景图像的大小会发生变化？

这是因为您将图像大小设置为％。 ％属性占用其父级的％大小。在我们的示例中，父级是视口（相当于 vh 和 vw ），如果更改视口大小，则会更改大小。