java 水波纹_css 滚动视差 之 水波纹效果

核心属性： background-attachment

这个属性就牛逼了， 它可以定义背景图片是相对视口固定，

还是随着视口滚动， 加上这个属性网页瞬间就从屌丝变成

高大上。

我们来看个例子：

html:

I WANT FLY

I WANT FLY

I WANT FLY

css:

body{

background-color: #cccccc;

margin:0;

padding:0;

}

.attach{

background-image: url("./img/1.jpg");

background-size: cover;/*background-attachment: fixed;*/background-position: center center;

}

.view{

height: 100vh;

}

.text{

font-size: 45px;

text-align: center;

line-height: 100vh;

color: #ffffff;

}

代码很简单，让视口出现滚动条，

然后它是这样的：