为什么使用background-attachment: scroll
或background-attachment: fixed
时,background-size:cover
会有所不同?
示例:
为什么使用background-attachment: scroll
或background-attachment: fixed
时,background-size:cover
会有所不同?
示例:
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
并且不允许后者的样式生效。
background-size:cover
分配给background-attachment:fixed
项目时,其容器将是实际视口该项目所在的位置。在您的情况下,猫图像被拉伸以适应小提琴结果框的总宽度。之所以会这样,可能是因为它将位置绝对应用于视口,同时还从视口收集所需的大小。
background-attachment:fixed
会使得background-size:cover
覆盖整个页面,无论应用到哪个元素的背景上。该元素只是成为一个小窗口,帮助我们看到大背景图像的一部分。实际上,background-attachment:scroll
使得背景图像沿着页面滚动条滚动(而不是元素的滚动条),它实际上是固定在元素上的。要使其沿着元素滚动,可以使用background-attachment:local
,但似乎我们无法使用background-size:cover
将其覆盖在元素上。 - King King