CSS背景附件滚动/固定和背景尺寸封面

Question

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

示例：

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

Answer 1

不同之处并不在于background-size: cover。background-attachment: scroll和background-attachment: fixed之间的区别在于

"... scroll 意味着背景相对于元素本身是固定的，并且不会随其内容一起滚动。(它实际上附加在元素的边框上。)

"... fixed 意味着背景相对于视口是固定的。即使元素有滚动机制，‘fixed’背景也不会随着元素移动。“

正如MDN所说。因此，您将在您的小提琴中看到，background-attachment: fixed背景不会保留在其包含的元素<div id="two">边框中。它是，取而代之的是在整个身体的背景中呈现绝对位置0，0的固定点。

从本质上讲，background-attachment: fixed覆盖了background-size: cover，不允许后一种样式生效。

Answer 2

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