html图片颜色填充,CSS3 页面滚动时填充图标颜色

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Signika);

*, *:after, *:before {

-moz-box-sizing: border-box;

box-sizing: border-box; }

html {

height: 100%; }

body {

color: white;

height: 100%;

background: #3e253c;

font-size: 16px;

font-family: 'Signika', sans-serif; }

body:before, body:after {

content: '';

position: fixed;

width: 89.8%;

max-width: 1170px;

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

right: auto;

height: 50%;

z-index: -1; }

body:before {

top: 0;

background-color: #f4bd89;

-webkit-transition: all 0.8s;

transition: all 0.8s; }

body:after {

top: 50%;

background-color: #71495b; }

h1, h2, p {

margin-bottom: 20px; }

h1 {

font-size: 3em; }

h2 {

font-size: 2.3em; }

p {

font-size: 1.25em; }

header {

position: relative;

background-color: #3e253c;

height: 50%;

text-align: center; }

.contain li {

position: relative;

z-index: 2;

min-height: 525px;

margin-left: 420px;

background-color: #3e253c;

padding: 6em 2em; }

.contain li:before, .contain li:after {

content: '';

position: absolute;

width: 420px;

right: 100%;

z-index: 2; }

.contain li:before {

top: 0;

height: 325px;

background-repeat: no-repeat; }

.contain li:after {

top: 325px;

bottom: 0;

background-image: url(http://codyhouse.co/demo/icons-filling-effect/img/cd-pattern-large.svg); }

.icon-1:before {

background-image: url(http://codyhouse.co/demo/icons-filling-effect/img/cd-icon-1-large.svg); }