最近响应式项目移动端遇到一个问题,页面使用的全屏的背景图片,但当它到了移动端需要滚动的时候,往下面一滚动,第二屏等会出现白底,后来让全屏背景图片固定了,再怎么滚动都不影响,解决掉了该尴尬问题。
增加 background-attachment: fixed; 后完美解决。
background-attachment详解:
取值:
scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。
fixed:背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了body上。
local:背景图相对于元素内容固定,
inhert:继承,没什么说的。
该属性可以应用于任何元素。