html背景设置为彩色,CSS3 彩色网格背景

CSS

语言：

CSSSCSS

确定

body,

html {

min-height: 100%;

overflow: hidden;

height: 100%;

margin:0;

}

.background {

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgyZDNlMSIvPjxzdG9wIG9mZnNldD0iMzMuMzMzJSIgc3RvcC1jb2xvcj0iIzgyZDNlMSIvPjxzdG9wIG9mZnNldD0iMzMuMzMzJSIgc3RvcC1jb2xvcj0iI2Y1ZjNmMSIvPjxzdG9wIG9mZnNldD0iNjYuNjY2JSIgc3RvcC1jb2xvcj0iI2Y1ZjNmMSIvPjxzdG9wIG9mZnNldD0iNjYuNjY2JSIgc3RvcC1jb2xvcj0iI2U1MTg2ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U1MTg2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

background-size: 100%;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #82d3e1), color-stop(33.333%, #82d3e1), color-stop(33.333%, #f5f3f1), color-stop(66.666%, #f5f3f1), color-stop(66.666%, #e5186e), color-stop(100%, #e5186e));

background-image: -moz-linear-gradient(#82d3e1, #82d3e1 33.333%, #f5f3f1 33.333%, #f5f3f1 66.666%, #e5186e 66.666%, #e5186e);

background-image: -webkit-linear-gradient(#82d3e1, #82d3e1 33.333%, #f5f3f1 33.333%, #f5f3f1 66.666%, #e5186e 66.666%, #e5186e);

background-image: linear-gradient(#82d3e1, #82d3e1 33.333%, #f5f3f1 33.333%, #f5f3f1 66.666%, #e5186e 66.666%, #e5186e);

height: 100%;

min-height: 100%;

z-index: 1;

}

.background:before {

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFmYTM4YiIvPjxzdG9wIG9mZnNldD0iMzMuMzMzJSIgc3RvcC1jb2xvcj0iIzFmYTM4YiIvPjxzdG9wIG9mZnNldD0iMzMuMzMzJSIgc3RvcC1jb2xvcj0iIzQ5YzM5ZSIvPjxzdG9wIG9mZnNldD0iNjYuNjY2JSIgc3RvcC1jb2xvcj0iIzQ5YzM5ZSIvPjxzdG9wIG9mZnNldD0iNjYuNjY2JSIgc3RvcC1jb2xvcj0iIzQwMTE0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwMTE0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

background-size: 100%;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1fa38b), color-stop(33.333%, #1fa38b), color-stop(33.333%, #49c39e), color-stop(66.666%, #49c39e), color-stop(66.666%, #401140), color-stop(100%, #401140));

background-image: -moz-linear-gradient(#1fa38b, #1fa38b 33.333%, #49c39e 33.333%, #49c39e 66.666%, #401140 66.666%, #401140);

background-image: -webkit-linear-gradient(#1fa38b, #1fa38b 33.333%, #49c39e 33.333%, #49c39e 66.666%, #401140 66.666%, #401140);

background-image: linear-gradient(#1fa38b, #1fa38b 33.333%, #49c39e 33.333%, #49c39e 66.666%, #401140 66.666%, #401140);

display: block;

content: '';

width: 33.3333%;

height: 100%;

position: absolute;

left: 0;

}

.background:after {

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3OTgxZiIvPjxzdG9wIG9mZnNldD0iMzMuMzMzMzMlIiBzdG9wLWNvbG9yPSIjNzc5ODFmIi8+PHN0b3Agb2Zmc2V0PSIzMy4zMzMzMyUiIHN0b3AtY29sb3I9IiNlZGI2MjQiLz48c3RvcCBvZmZzZXQ9IjY2LjY2NjY3JSIgc3RvcC1jb2xvcj0iI2VkYjYyNCIvPjxzdG9wIG9mZnNldD0iNjYuNjY2NjclIiBzdG9wLWNvbG9yPSIjZDcxMDBlIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDcxMDBlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

background-size: 100%;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #77981f), color-stop(33.33333%, #77981f), color-stop(33.33333%, #edb624), color-stop(66.66667%, #edb624), color-stop(66.66667%, #d7100e), color-stop(100%, #d7100e));

background-image: -moz-linear-gradient(#77981f, #77981f 33.33333%, #edb624 33.33333%, #edb624 66.66667%, #d7100e 66.66667%, #d7100e);

background-image: -webkit-linear-gradient(#77981f, #77981f 33.33333%, #edb624 33.33333%, #edb624 66.66667%, #d7100e 66.66667%, #d7100e);

background-image: linear-gradient(#77981f, #77981f 33.33333%, #edb624 33.33333%, #edb624 66.66667%, #d7100e 66.66667%, #d7100e);

display: block;

content: '';

width: 33.3333%;

height: 100%;

position: absolute;

right: 0;

}