什么是background-attachment

Posted 2021-01-03 runhua

background-attachment的作用是设置背景图片是随滚动轴如何滚动的css属性

    background-attachment有四个可选值：fixed，scroll，local，inherit（就是单纯地继承父元素的属性）

    其中scroll和local属性的作用相类似，当设置background-position的时候，他们的位置是相对于元素的边框的，因此当我们滚动浏览器的滚动条的时候，它会跟随着元素滚动条的滚动而滚动，并和元素一起因滚动而无法在视图中被浏览者看见。

    但是假如这个元素内部是具有滚动条的也就是设置了overflow：scroll，那么background-attachment设置了scroll的话，背景图片不会随着内部滚动条的滚动而滚动，但是假如设置了local，那么内容就会随着滚动条的滚动而滚动。

    使用scroll的内部带有滚动条的元素内的背景图片不会因为滚动条滚动而改变位置：

 

scroll

    使用local的内部带有滚动条的元素内的背景图片则会因为滚动条滚动而改变位置

 

local

    这是为什么呢？这是因为准确来讲，scroll相对于元素固定，而local是相对于元素内容固定。也就是说，在存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll。

    上面就是scroll和local的区别

    那么接下来讲一下fixed与scroll的区别，fixed设置后，与scroll的背景图片位置相对于元素不同，fixed的背景图片位置是相对于页面可视区域的左上角的，元素的大小是背景图片能够显示的范围，当滚动过了这个范围，背景图片也将无法看见。fixed不会随着滚动条的滚动而滚动，它只会固定在页面中的某一个位置。这就是fixed与scroll的区别。