html怎么混合颜色,CSS3 多色混合背景

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Lato:300";

html,

body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

font-family: 'Lato', sans-serif;

}

html {

background: -webkit-linear-gradient(90deg, rgba(0, 0, 200, 0.5), rgba(0, 0, 200, 0));

background: linear-gradient(0deg, rgba(0, 0, 200, 0.5), rgba(0, 0, 200, 0));

}

body {

background: -webkit-linear-gradient(330deg, rgba(50, 150, 100, 0.5), rgba(0, 0, 100, 0));

background: linear-gradient(120deg, rgba(50, 150, 100, 0.5), rgba(0, 0, 100, 0));

}

.container {

background: -webkit-linear-gradient(210deg, rgba(150, 50, 50, 0.5), rgba(0, 0, 200, 0));

background: linear-gradient(240deg, rgba(150, 50, 50, 0.5), rgba(0, 0, 200, 0));

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-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

margin: 0;

padding: 0;

height: 100%;

width: 100%;

}

h1 {

color: white;

font-weight: 100;

}

.me {

position: fixed;

bottom: 10px;

right: 10px;

}

.me .sg {

width: 35px;

height: 35px;

}

.me .sg .eye {

-webkit-transform: translateX(0px);

transform: translateX(0px);

}

.me .sg:hover .eye {

-webkit-transition: -webkit-transform 0.3s ease;

transition: -webkit-transform 0.3s ease;

transition: transform 0.3s ease;

transition: transform 0.3s ease, -webkit-transform 0.3s ease;

-webkit-transform: translateX(12px);

transform: translateX(12px);

}