页面背景色渐变

渐变效果：

css：

html,body {
    height: 100%;
}
body {
    background: linear-gradient(#51b0e7,#006084);
}

上下两块：

css：

body {
    background: linear-gradient(#51b0e7 50%,#006084 50%);/*上下各50%*/
}

横线背景：

css：

body {
    background: linear-gradient(#51b0e7 50%,#006084 50%);           
    background-size: 20px 20px;
}

纵向背景：

css：

body {
    background: linear-gradient(90deg, #51b0e7 50%,#006084 50%);            
    background-size: 30px 30px;
}

斜角小格子背景：

css：

body {
    background: linear-gradient(45deg, #51b0e7 50%,#006084 50%);            
    background-size: 30px 30px;
}

斜线背景：

css：

body {
    background: repeating-linear-gradient(45deg, #3498db ,#3498db 20px, #2980b9 20px, #2980b9 40px);
}

解析：repeating-linear-gradient方法生成重复平铺的渐变背景，不能使用百分比来作为渐变位置点，而是要精确到具体的像素，以决定横线的粗细。
该团的渐变方向为45度，从0到20px处为浅蓝色，20px到40px处为深蓝色。