css - CSS背景附件滚动/固定和背景大小封面

Question

background-size:coverifbackground-attachment: scroll或background-attachment: fixedused为什么不同？

例子：

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

Answer 1

区别真的不在background-size: cover。background-attachment: scroll和的区别background-attachment: fixed在于

“...滚动意味着背景相对于元素本身是固定的，并且不会随其内容滚动。（它有效地附加到元素的边框。）

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

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

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

Answer 2

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