4.3 定义渐变背景样式
视频讲解
基于CSS3的渐变背景与渐变图片相比，最大的优点是便于修改，同时支持无级缩放，过渡更加自然。CSS3支持线性渐变和径向渐变，下面分别进行介绍。
4.3.1 线性渐变
创建线性渐变，至少需要两种颜色，可选择设置一个起点或一个方向。简明语法格式如下。
linear-gradient( angle, color-stop1, color-stop2, …)
参数简单说明如下。
☑ angle：用来指定渐变的方向，可以使用角度或者关键字来设置。关键字包括4个，说明如下。
● to left：设置渐变从右到左，相当于270deg。
● to right：设置渐变从左到右，相当于90deg
● to top：设置渐变从下到上，相当于0deg
● to bottom：设置渐变从上到下，相当于180deg。该值为默认值。
提示：如果创建对角线渐变，可以使用类似于to top left（从右下到左上）的关键字来实现。
☑ color-stop：用于指定渐变的色点，包括一个颜色值和一个起点位置，颜色值和起点位置以空格分隔。起点位置可以为一个具体的长度值（不可为负值），也可以是一个百分比值，如果是百分比值则参考应用渐变对象的尺寸，最终会被转换为具体的长度值。
【示例1】本示例为<div id="demo">对象应用了一个简单的线性渐变背景，方向从上到下，颜色由白色到浅灰，效果如图4.19所示。
<style type="text/css">
#demo {
width:300px;
height:200px;
background: linear-gradient(#fff, #333);
}
</style>
<div id="demo"></div>
图4.19 应用简单的线性渐变效果
提示：针对示例1，用户可以继续尝试做下面的练习，实现通过不同的设置得到相同的设计效果。
☑ 设置一个方向：从上到下，覆盖默认值。
linear-gradient(to bottom, #fff, #333);
☑ 设置反向渐变：从下到上，同时调整起止颜色位置。
linear-gradient(to top, #333, #fff);
☑ 使用角度值设置方向。
linear-gradient(180deg, #fff, #333);
☑ 明确起止颜色的具体位置，覆盖默认值。
linear-gradient(to bottom, #fff 0%, #333 100%);
【示例2】本示例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色，效果如图4.20所示。
注意，第一个参数值渐变方向的设置不同。
【示例3】通过指定水平和垂直的起始位置来设计对角渐变。本示例演示了从左上角到右下角的线性渐变，起点是红色，慢慢过渡到蓝色，效果如图4.21所示。
图4.20 设计从左到右的线性渐变效果
图4.21 设计对角线性渐变效果
【示例4】通过指定具体的角度值，可以设计更多渐变方向。本示例演示了从上到下的线性渐变，起点是红色，慢慢过渡到蓝色，效果如图4.22所示。
【补充】
渐变角度是指垂直线和渐变线之间的角度，逆时针方向计算。例如，0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。注意，渐变起点以负y轴为参考。
但是，很多浏览器（如Chrome、Safari、Firefox等）使用旧的标准：渐变角度是指水平线和渐变线之间的角度，逆时针方向计算。例如，0deg将创建一个从左到右的渐变，90deg将创建一个从下到上的渐变。注意，渐变起点以负x轴为参考。
兼容公式如下。
90 - x = y
其中，x为标准角度，y为非标准角度。
【示例5】设置多个色点。本示例定义从上到下的线性渐变，起点是红色，慢慢过渡到绿色，再慢慢过渡到蓝色，效果如图4.23所示。
图4.22 设计从上到下的渐变效果
图4.23 设计多色线性渐变效果
【示例6】设置色点位置。本示例定义从上到下的线性渐变，起点是黄色，快速过渡到蓝色，再慢慢过渡到绿色，效果如图4.24所示。
【示例7】CSS3渐变支持透明度设置，可用于创建减弱变淡的效果。本示例演示了从左边开始的线性渐变。起点是完全透明，起点位置为30%，慢慢过渡到完全不透明的红色，为了更清晰地看到半透明效果，增加了一层背景图像进行衬托，演示效果如图4.25所示。
#demo {
width:300px; height:200px;
/* Safari 5.1 - 6 */
background: -webkit-linear-gradient(left,rgba(255,0,0,0) 30%,rgba(255,0,0,1)),url(images/bg.jpg);
/* Opera 11.1 - 12*/
background: -o-linear-gradient(left,rgba(255,0,0,0) 30%,rgba(255,0,0,1)),url(images/bg.jpg);
/* Firefox 3.6 - 15*/
background: -moz-linear-gradient(left,rgba(255,0,0,0) 30%,rgba(255,0,0,1)),url(images/bg.jpg);
/* 标准语法 */
background: linear-gradient(to right, rgba(255,0,0,0) 30%, rgba(255,0,0,1)),url(images/bg.jpg);
background-size:cover; /* 背景图像完全覆盖 */
}
图4.24 设计多色线性渐变效果
图4.25 设计半透明线性渐变效果
提示：为了添加透明度，可以使用rgba()或hsla()函数来定义色点。rgba()或hsla()函数中最后一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表示完全不透明。
4.3.2 径向渐变
视频讲解
创建一个径向渐变，也至少需要定义两种颜色，同时可以指定渐变的中心点位置、形状类型（圆形或椭圆形）和半径大小。简明语法格式如下。
radial-gradient(shape size at position, color-stop1, color-stop2, …);
参数简单说明如下。
☑ shape：用来指定渐变的类型，包括circle（圆形）和ellipse（椭圆）两种。
☑ size：如果类型为circle，指定一个值设置圆的半径；如果类型为ellipse，指定两个值分别设置椭圆的x轴和y轴半径。取值包括长度值、百分比、关键字。关键字说明如下。
● closest-side：指定径向渐变的半径长度为从中心点到最近的边。
● closest-corner：指定径向渐变的半径长度为从中心点到最近的角。
● farthest-side：指定径向渐变的半径长度为从中心点到最远的边。
● farthest-corner：指定径向渐变的半径长度为从中心点到最远的角。
☑ position：用来指定中心点的位置。如果提供两个参数，第1个表示x轴坐标，第2个表示y轴坐标；如果只提供1个值，第2个值默认为50%，即center。取值可以是长度值、百分比或者关键字，关键字包括left（左侧）、center（水平居中）、right（右侧）、top（顶部）、center（垂直居中）、bottom（底部）。
注意，position值位于shape和size值后面。
☑ color-stop：用于指定渐变的色点。包括一个颜色值和一个起点位置，颜色值和起点位置以空格分隔。起点位置可以为一个具体的长度值（不可为负值），也可以是一个百分比值，如果是百分比值则参考应用渐变对象的尺寸，最终会被转换为具体的长度值。
【示例1】在默认情况下，渐变的中心是center（对象中心点），渐变的形状是ellipse（椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。本示例仅为radial-gradient()函数设置3个颜色值，则它将按默认值绘制径向渐变效果，如图4.26所示。
图4.26 设计简单的径向渐变效果
提示：针对示例1，用户可以继续尝试做下面的练习，实现通过不同的设置，得到相同的设计效果。
☑ 设置径向渐变形状类型，默认值为ellipse。
background: radial-gradient(ellipse, red, green, blue);
☑ 设置径向渐变中心点坐标，默认为对象中心点。
background: radial-gradient(ellipse at center 50%, red, green, blue);
☑ 设置径向渐变大小，这里定义填充整个对象。
background: radial-gradient(farthest-corner, red, green, blue);
【示例2】本示例演示了色点不均匀分布的径向渐变，效果如图4.27所示。
【示例3】shape参数定义了形状，取值包括circle和ellipse，其中circle表示圆形，ellipse表示椭圆形，默认值是ellipse。本示例设计圆形径向渐变，效果如图4.28所示。
#demo {
height:200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准语法 */
}
图4.27 设计色点不均匀分布的径向渐变效果
图4.28 设计圆形径向渐变效果
【示例4】本示例设计径向渐变的半径为从圆心到离圆心最近的边，如图4.29所示。
#demo {
height:200px;
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 标准语法 */
background: radial-gradient(closest-side at 60% 55%, blue,green,yellow,black);
}
注意，radial-gradient()标准函数与各私有函数在设置参数时顺序不同是有区别的。
【示例5】本示例模拟的是太阳初升的效果，如图4.30所示。设计径向渐变中心点位于左下角，半径为最大化显示，定义3个色点，第1个色点设计太阳效果，第2个色点设计太阳余晖，第3个色点设计太空，第1个色点和第2个色点距离为60像素。
#demo {
height:200px;
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(left bottom, farthest-side, #f00, #f99 60px, #005);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(left bottom, farthest-side, #f00, #f99 60px, #005);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(left bottom, farthest-side, #f00, #f99 60px, #005);
/* 标准语法 */
background: radial-gradient(farthest-side at left bottom, #f00, #f99 60px, #005);
}
图4.29 设计最小限度的径向渐变效果
图4.30 模拟太阳初升效果
【示例6】本示例模拟太阳旗效果，如图4.31所示。设计径向渐变中心点位于对象中央，定义两个色点，第1个色点设计太阳效果，第2个色点设计背景，两个色点位置相同。
<style type="text/css">
body { background:hsla(207,59%,78%,1.00) }
#demo {
height:200px;
width:300px;
margin:auto;
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(center, circle, #f00 50px, #fff 50px);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(center, circle, #f00 50px, #fff 50px);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(center, circle, #f00 50px, #fff 50px);
/* 标准语法 */
background: radial-gradient(circle at center, #f00 50px, #fff 50px);
}
</style>
<div id="demo"></div>
图4.31 模拟太阳旗效果