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

为什么background-size:cover如果使用background-attachment: scroll或background-attachment: fixed会有所不同？CSS背景附件滚动/固定和背景大小覆盖

例子：

2014-04-14 enriqg9

'background-attachment：fixed'似乎可以覆盖整个页面的'background-size：cover'，而不管'background'应用于哪个元素。元素只是成为一个小窗口，帮助我们看到大背景图像的一部分。实际上，'background-attachment：scroll'使bg图像沿页面的滚动缩略图（不是元素）滚动，它实际上固定在元素上。为了使它沿着元素滚动，你可以使用'background-attachment：local'来代替，但是看起来我们不能用'background-size：cover'来覆盖元素。 –

的区别是不是真的在background-size: cover。 background-attachment: scroll和background-attachment: fixed之间的区别是，

” ...... 滚动意味着背景是固定相对于元素本身，不与它的内容滚动。（它有效地连接到元素的边界。）

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

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

从本质上说，background-attachment: fixed被覆盖background-size: cover，而不是让后者的风格才能生效。

来源

2014-04-14 01:22:13 jennz0r

谢谢，我在这里看到（http://stackoverflow.com/questions/3534441/how-to-fix-background-image-inside-div），除了使用js改变背景位置之外，没有解决这个问题。 – enriqg9

当您将background-size:cover转换为background-attachment: fixed项目时，其容器将是a物品视图的端口。在你的情况下，猫图像被拉伸以适应小提琴结果框的总宽度。这样做的原因可能是因为它将位置绝对地应用于视口，它也会从视口收集所需的大小。

来源

2014-04-14 01:23:03

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

回答

相关问题