最近在好几个网站上面看到了一种没见过的样式,研究了一下,发现是这个属性的作用,拿出来记录一下好了。
请参考页面 萤石商品详情页
background-attachment
: 规定背景图像是否固定或者随着页面的其余部分滚动。
有三个可选值:参考 CSS background-attachment 属性
scroll
: 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed
:当页面的其余部分滚动时,背景图像不会移动。
inherit
:规定应该从父元素继承 background-attachment 属性的设置。
iOS系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了,代码如下:
ps:想在哪个标签加背景,可以在它class后:before.
body:before {
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(path/to/image) center 0 no-repeat;
background-size: cover;
}