html - 固定背景附件如何工作？

Question

当 background-attachment 设置为 fixed 时，我有一些关于背景图像的问题。它们是:

1. 假设我将背景图像设置为一个宽度为 500 像素、高度为 500 像素、带有 1 像素实心红色边框的 div。现在，如果我给 background-size: 100% 100%。为什么背景图片的尺寸略大于 500px？为什么更改视口(viewport)大小时背景图像的大小会发生变化？

2. 如何为背景图片指定一个最小高度，以便当视口(viewport)的尺寸发生变化时，背景图片不会变得小于特定高度？

Answer 1

当背景为fixed时它相对于 body元素，这就是为什么设置 100% 100% 大小的原因结果宽度大于 div应用到哪个图像。它将等于 body 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>