CSS背景附着滚动/固定和背景大小覆盖

Question

为什么使用background-attachment: scroll或background-attachment: fixed时，background-size:cover会有所不同？

示例：

http://jsfiddle.net/enriqg9/Yn43U/

- enriqg9

---

似乎background-attachment:fixed会使得background-size:cover覆盖整个页面，无论应用到哪个元素的背景上。该元素只是成为一个小窗口，帮助我们看到大背景图像的一部分。实际上，background-attachment:scroll使得背景图像沿着页面滚动条滚动（而不是元素的滚动条），它实际上是固定在元素上的。要使其沿着元素滚动，可以使用background-attachment:local，但似乎我们无法使用background-size:cover将其覆盖在元素上。 - King King

Answer 1

差异并不在于 background-size: cover。 background-attachment: scroll 和 background-attachment: fixed 的区别在于：

“...scroll 表示背景与元素自身固定，不会随内容滚动而滚动。（实际上，它附加到元素的边框上。）

“...fixed 表示背景相对于视口固定。即使元素具有滚动机制，“fixed” 背景也不会随元素移动。

正如MDN所说的那样。因此，在您的fiddle中，background-attachment: fixed背景不会停留在其包含元素 <div id="two"> 边界上。相反，它采用整个 body 背景中绝对定位 0, 0 的固定点。

本质上，background-attachment: fixed 覆盖了 background-size: cover 并且不允许后者的样式生效。

- jennz0r

---

谢谢，我在这里看到（https://dev59.com/AXA65IYBdhLWcg3w-z1A）除了使用JS更改背景位置之外，没有其他解决办法。 - enriqg9

Answer 2

当您将background-size:cover分配给background-attachment:fixed项目时，其容器将是实际视口该项目所在的位置。在您的情况下，猫图像被拉伸以适应小提琴结果框的总宽度。之所以会这样，可能是因为它将位置绝对应用于视口，同时还从视口收集所需的大小。

- 3066d0