background background属性在CSS3中被赋予非常强大的功能。其中一个非常重要的功能就是多重背景。在过去设置图片背景时,只能使用一张图片,而在CSS3中,则可以设置多重背景图片,例如代码: background:url(background1.png) left top no-repeat, url(background2.png) left top no-repeat; Chrome浏览器和Safari浏览器都支持background属性的多重背景功能。由于它们都是基于Webkit的浏览器,因此该功能也支持Android和iOS移动平台的移动Web浏览器。但鉴于采用图片的方式设置背景会严重影响在移动Web端的体验,因此可以使用Webkit的其中一种特性对背景采用颜色渐变,而非采用图片方式。 语法如下: -webkit-gradient(<type>, <port>[, <radius>]?,<point> [, <radius>]? [, <stop>]*) 上述语法比较复杂,对于入门新手的CSS3读者而言的确是一个门槛。不过不要紧,语法虽然复杂,但在实际使用时是极其简单的,甚至在一些网站上也提供该属性的可视化配置。 type类型是指采用渐变类型,如线性渐变linear或径向渐变radial。 如下代码: background:-webkit-gradient(linear,0 0,0 100%,form(#FFF),to(#000)); 上述代码的含义是定义一个渐变背景色,该渐变色是线性渐变并且是由白色向黑色渐变的。其中前两个0表示的是渐变开始X和Y坐标位置;0和100%表示的是渐变结束X和Y坐标位置。