1.先贴上纵向平铺的例子代码及其效果截图:

设置背景图平铺容器_线性渐变


设置背景图平铺容器_设置背景图平铺容器_02



如果把上面代码中的top变成left,同时把高度和宽度值互换,则效果如图:

设置背景图平铺容器_线性渐变_03

即变成横向平铺了。


Firefox支持两种类型的CSS渐变:线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)

(1)线性渐变(Linear Gradients)

要创建一个线性渐变,您需要设置一个起点和一个渐变的方向(或角度),并定义起止颜色。

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

起始点(Starting Point):起 点的工作方式类似于background position。您可以设置水平和垂直位置为百分比,或以像素为单位,或在水平方向上可以使用left/center/right,在垂直方向上可以使 用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置,它将默认为center。

参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示:

一个例子如图:

设置背景图平铺容器_ide_04

效果为:

设置背景图平铺容器_ide_05

而repeating-linear-gradient 重复渐变属性与线性渐变属性的格式是一样的。详情参考上面例子。


2.径向渐变

代码及其效果如图:

设置背景图平铺容器_设置背景图平铺容器_06



设置背景图平铺容器_线性渐变_07

径向渐变的语法非常类似于线性渐变。

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

除了您已经在线性渐变中看到的起始位置,方向,和颜色, 径向梯度允许你指定渐变的形状(圆形或椭圆形)和大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。

下面给出一个例子:

设置背景图平铺容器_线性渐变_08


效果如图:

设置背景图平铺容器_设置背景图平铺容器_09


 


如果您想重复一个渐变,您可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。 在下面的例子,每个实例都指定了两个起止颜色,并无限重复。


例代码如下:


background: -webkit-repeating-linear-gradient(#ace 0px, #ace 5px, #f96 5px, #f96 10px,#adff2f 10px,#adff2f 15px);


效果如下:


设置背景图平铺容器_设置背景图平铺容器_10


下面附上一个利用线性渐变和径向渐变做成的一个效果连接:


http://www.html5sum.com/wp-content/uploads/2012/11/wall.html