用css3 gradient实现背景平铺，代替传统的图片平铺方法

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



如果把上面代码中的top变成left,同时把高度和宽度值互换，则效果如图：
即变成横向平铺了。

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，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：

一个例子如图：

效果为：

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

2.径向渐变
代码及其效果如图：

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

-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)）。

下面给出一个例子：

效果如图：

 

如果您想重复一个渐变，您可以使用-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);

效果如下：

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

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

转载于:https://www.cnblogs.com/zhp404/articles/4145991.html