html背景滚轮,CSS滚动背景变化

css

.content, .wrapper:before {

box-sizing: border-box;

display: block;

font-size: 4em;

padding: 1em;

width: 6em;

height: 3em;

position: fixed;

top: 50%;

left: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

}

.content {

font-weight: bold;

text-align: center;

z-index: 1000;

background: #fff;

color: #000;

mix-blend-mode: lighten;

}

section {

background-repeat: no-repeat;

background-size: cover;

isolation: isolate;

position: relative;

height: 100vh;

padding: 1em;

}

.wrapper {

clip: rect(auto auto auto auto);

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

.wrapper:before {

content: " ";

padding: 2em 3.5em;

mix-blend-mode: darken;

}

.one {

background-image: url(https://unsplash.it/1920/1080?image=737);

}

.one .wrapper:before {

background: red;

}

.two {

background-image: url(https://unsplash.it/1920/1080?image=812);

}

.two .wrapper:before {

background: #faaa54;

mix-blend-mode: difference;

}

.three {

background-image: url(https://unsplash.it/1920/1080?image=810);

}

.three .wrapper:before {

background: #6c320a;

mix-blend-mode: screen;

}

.four {

background-image: url(https://unsplash.it/1920/1080?image=634);

}

.four .wrapper:before {

background: #e4135d;

}