用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))。
下面给出一个例子:
效果如图: