什么是background-attachment
background-attachment的作⽤是设置背景图⽚是随滚动轴如何滚动的css属性
background-attachment有四个可选值：fixed，scroll，local，inherit（就是单纯地继承⽗元素的属性）
其中scroll和local属性的作⽤相类似，当设置background-position的时候，他们的位置是相对于元素的边框的，因此当我们滚动浏览器的滚动条的时候，它会跟随着元素滚动条的滚动⽽滚动，并和元素⼀起因滚动⽽⽆法在视图中被浏览者看见。
但是假如这个元素内部是具有滚动条的也就是设置了overflow：scroll，那么background-attachment设置了scroll的话，背景图⽚不会随着内部滚动条的滚动⽽滚动，但是假如设置了local，那么内容就会随着滚动条的滚动⽽滚动。
使⽤scroll的内部带有滚动条的元素内的背景图⽚不会因为滚动条滚动⽽改变位置：
scroll
html如何设置图片滚动使⽤local的内部带有滚动条的元素内的背景图⽚则会因为滚动条滚动⽽改变位置
local
这是为什么呢？这是因为准确来讲，scroll相对于元素固定，⽽local是相对于元素内容固定。也就是说，在存在内部滚动条的情况下，scroll就相当于fixed，⽽local就相当于scroll。
上⾯就是scroll和local的区别
那么接下来讲⼀下fixed与scroll的区别，fixed设置后，与scroll的背景图⽚位置相对于元素不同，fixed
的背景图⽚位置是相对于页⾯可视区域的左上⾓的，元素的⼤⼩是背景图⽚能够显⽰的范围，当滚动过了这个范围，背景图⽚也将⽆法看见。fixed不会随着滚动条的滚动⽽滚动，它只会固定在页⾯中的某⼀个位置。这就是fixed与scroll的区别。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。