背景渐变,多层背景图

一.线性渐变 linear-gradient

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。默认为从上到下.
没有属性前缀的需要在()里添加to 写上结束方向
带有属性前缀的直接在()里写上从哪个方向开始
多个背景用逗号隔开,写在前面的层级高,所以叠加时,前面的颜色需要加透明度,另外可以同时在最后用逗号隔开插入背景图,实现背景图 滤镜效果.
例子:左侧红色渐变到右边为蓝色
#grad {
background-image: -webkit-linear-gradient(left,red, blue);
background-image: -o-linear-gradient(left,red, blue);
background-image: -moz-linear-gradient(left,red, blue);
background-image: linear-gradient( to right,red, blue); /* 标准的语法 */
background-image: linear-gradient( to 90deg,red, blue);逆时针的
}
例子:多层线性渐变后有背景图

#grad {background-image: linear-gradient(rgba(),rgba()),linear-gradient(rgba(),rgba()),url(图片地址);
}
除此之外可以设置渐变区间如:
#grad {background-image: linear-gradient( to right,red 30%, blue 50%);
}
将百分比跟在颜色之后,可以