background-attachment详解与页面滚动差效果

原创 greenhand 随笔 页面效果 130阅读 2018-10-10 19:48:24 举报

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: inherit;

fixed
此关键字表示背景相对于浏览器窗口固定。即使一个元素拥有滚动机制,背景也不会随着元素或其内容滚动。并且背景的绘制区域和定位区域是相对于浏览器窗口而不是应用该背景的元素本身

local
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域(内容区域)而不是元素的边框(元素本身)

scroll
此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动(对元素边框是有效的)。背景的绘制区域和定位区域是相对于应用该背景的元素的边框

利用background-attachment: fixed;实现页面滚动差效果

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复