天魔窟

勇往直前

Avatar

关于 background-attachment: fixed 属性

在使用 CSS 设定背景图片时,如果指定了 background-attachment: fixed 这个属性值,那么背景图片将会固定在一个位置,即使页面滚动,图片位置也不会变。

我今天才弄明白,这个固定的位置是相对于所谓的 viewport,其实就是浏览器窗口,而不是相对于图片所处的容器。

比如说,如果给一个 div 指定了一个 fixed 在“右下角”的背景图片,那么这个“右下角”并不是该 div 的右下角,而是当前浏览器窗口的右下角。如果这个 div 本身并不处在浏览器窗口右下角位置(可能被浮动或者尺寸受限),那么这个背景图片可能就会显示不完全。

所以,fixed 的位置是全局性的,容器的位置和尺寸只会限制其所控制图片的显示完整程度。