css3 混合,使用CSS3中图像混合模式的演示

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

padding: 0;

margin: 0;

font-family: "Nocturno Display Medium 4", Georgia;

font-style: normal;

font-weight: normal;

font-stretch: normal;

}

body {

background: url(http://unsplash.it/1499/1000);

background-size: 100%;

background-size: cover;

background-repeat: no-repeat;

}

.blend {

mix-blend-mode: exclusion;

color: white;

display: block;

height: 100%;

width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

text-align: center;

font-size: 6vw;

}

.red {

color: red;

}

.blue {

color: blue;

}

.green {

color: green;

}

blockquote {

margin-bottom: 100px;

line-height: 1.1;

}