使用css的linear-gradient()函数制作网页元素背景透明渐变色

如今，客户的需求越来越高，已经不满足于普通网站的建设了。随着浏览器支持度越来越好，客户对网站美观先进程度的需求也是越来越高，比如网页元素背景使用透明渐变色。

网页制作过程中，如果要做透明渐变色，就需要使用css的linear-gradient()函数，介绍如下：

以下实例演示了从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色：

background-image: linear-gradient(red, yellow, blue);

一、定义与用法

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

二、值

实例：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

其中：

（1）direction：用角度值指定渐变的方向（或角度）。

（2）color-stop1, color-stop2,...：用于指定渐变的起止颜色。

三、实例

（1）以下实例演示了从左侧开始的线性渐变，从红色开始，转为黄色：

background-image: linear-gradient(to right, red , yellow);

（2）以下实例演示了从左上角到右下角的线性渐变：

background-image: linear-gradient(to bottom right, red , yellow);

（3）以下实例演示了线性渐变指定一个角度：

background-image: linear-gradient(180deg, red, yellow);

（4）以下实例演示了多个终止色：

background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

（5）以下实例使用了透明度：

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

四、兼容性写法示例：

background-image: -webkit-linear-gradient(rgb(142,160,188,0.8), rgb(29,101,185,0.9) 80%);
background-image: -moz-linear-gradient(rgb(142,160,188,0.8), rgb(29,101,185,0.9) 80%);
background-image: -o-linear-gradient(rgb(142,160,188,0.8), rgb(29,101,185,0.9) 80%);
background-image: -ms-linear-gradient(rgb(142,160,188,0.8), rgb(29,101,185,0.9) 80%);
background-image: linear-gradient(rgb(142,160,188,0.8), rgb(29,101,185,0.9) 80%);