background-image：设置或检索对象的背景图像

background-repeat：设置或检索对象的背景图像如何铺排填充

background-attachment：设置或检索对象的背景图像是随对象内容滚动还是固定的

background-origin：设置或检索对象的背景图像显示的原点

background-clip：检索或设置对象的背景向外裁剪的区域

background-size：检索或设置对象的背景图像的尺寸大小

Multiple background：检索或设置对象的多重背景图像

前三个是原属性被css3修改，后面四个是新增加的css3属性。

一、background-image

1）使用绝对或相对地址指定背景图像

描述：设置对象背景的图片，请设置一种与背景图片颜色相似的背景颜色，这样的话，假如背景图像不可用，或者加载过慢，页面也可获得良好的视觉效果。

实例

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

背景图片

提示：默认地情况下，背景图像位于元素的左上角，并在水平和垂直方向上重复。

 

2）使用渐变绘制背景图像

渐变类型： linear-gradient（线性渐变）, radial-gradient（径向(放射性)渐变）, repeating-linear-gradient（重复的线性渐变）, repeating-radial-gradient（重复的径向(放射性)渐变）

提示：IE8及更早浏览器不支持CSS3 background-image，即不支持多背景和使用渐变作为背景图像。

<linear-gradient>语法：

<linear-gradient>：linear-gradient([ <point>,] <color-stop>[, <color-stop>]+);

<point>：[ left | right ][ top | bottom ] || <angle>

<color-stop>：<color> [ <length> | <percentage> ]

<point>

left：设置左边为渐变起点的横坐标值。

right：设置右边为渐变起点的横坐标值。

top：设置顶部为渐变起点的纵坐标值。

bottom：设置底部为渐变起点的纵坐标值。

<angle>：用角度值指定渐变的方向（或角度）。

<color-stop>：指定渐变的起止颜色。

<color-stop>

<color>：指定颜色。

<length>：用长度值指定起止色位置。不允许负值

<percentage>：用百分比指定起止色位置。

 

以上的渐变可以用下面的几种方法实现：

linear-gradient(#fff,#333);

linear-gradient(top,#fff,#333);

linear-gradient(bottom,#333,#fff);

linear-gradient(-90deg,#fff,#333);

 

background:linear-gradient(#000,#f00 50%,#090);

 

background: linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);

 

background: linear-gradient(45deg,#000,#f00 50%,#090);

<radial-gradient>语法： 

radial-gradient([ <position>,][ [ <shape> || <size> ] | <shape-size>{2},]<color-stop>[, <color-stop>]+);

示例：

 

以上的渐变可以用下面的几种方法实现：

radial-gradient(circle,#f00,#ff0,#080);

radial-gradient(center,circle,#f00,#ff0,#080);

radial-gradient(50%,circle,#f00,#ff0,#080);

radial-gradient(circle,#f00 0%,#ff0 50%,#080 100%);

radial-gradient(circle cover,#f00,#ff0,#080);

3)多重背景图

CSS3 允许您为元素使用多个背景图像,多重背景图可以是url()或gradient的混合方式

为 body 元素设置两幅背景图片：

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

原图片：

设置两张背景演示：