在CSS 2.1中，background属性的功能还无法满足设计的需求，为了方便设计师更灵活地设计需要的网页效果，CSS3在原有background基础上新增了一些功能属性，可以在同一个对象内叠加多个背景图像，可以改变背景图像的大小尺寸，还可以指定背景图像的显示范围，以及指定背景图像的绘制起点等。另外，CSS3允许用户使用渐变函数绘制背景图像，这极大地降低了网页设计的难度，激发了设计师的创意灵感。
1、设计背景图像CSS3增强了background属性的功能，允许在同一个元素内叠加多个背景图像，还新增了3个与背景相关的属性：background-clip、background-origin、background-size。
1.1、设置背景图像在CSS中可以使用background-image属性定义背景图像，具体用法如下：
background-image：none |其中，默认值为none，表示无背景图；
【示例】如果背景包含透明区域的GIF或PNG格式图像，则被设置为背景图像时，这些透明区域依然被保留。在下面这个示例中，先为网页定义背景图像，再为段落文本定义透明的GIF背景图像：
CSS使用background-repeat属性控制背景图像的显示方式，具体用法如下所示：
background-repeat：repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}取值说明如下：
repeat-x：背景图像在横向平铺。repeat-y：背景图像在纵向平铺。repeat：背景图像在横向和纵向平铺。no-repeat：背景图像不平铺。round：背景图像自动缩放直到适应且充满整个容器，仅CSS3支持。space：背景图像以相同的间距平铺且充满整个容器或某个方向，仅CSS3支持。【示例】设计一个公司公告栏，其中宽度是固定的，但是其高度可能会根据正文内容进行动态调整，为了适应设计需要，不妨利用垂直平铺进行设计。【操作步骤】第1步，把“公司公告”栏目分隔为上、中、下三块，设计上块和下块为固定宽度，而中间块为可以随时调整高度。设计的结构如下：
第2步，主要背景样式，经过调整中间块元素的高度以形成不同高度的公告牌：
#call_tit { background:url(images/call_top.gif); background-repeat:no-repeat; height:43px; } #call_mid { background-image:url(images/call_mid.gif); background-repeat:repeat-y; height:160px; } #call_btm { background-image:url(images/call_btm.gif); background-repeat:no-repeat; height:11px; }
在默认情况下，背景图像显示在元素的左上角，并根据不同方式执行不同的显示效果。为了更好地控制背景图像的显示位置，CSS定义了background-position属性精确定位背景图像。
background-position属性的取值包括两个值，它们分别用来定位背景图像的x轴、y轴坐标，取值单位没有限制。具体用法如下所示：
background-position：[ left | center | right | top | bottom |默认值为0% 0%，等效于left top。
注意：百分比是最灵活的定位方式，同时也是最难把握的定位单位。
在默认状态下，定位的位置为(0% 0%)，定位点是背景图像的左上顶点，定位距离是该点到包含框左上角顶点的距离，即两点重合。
如果定位背景图像为(100% 100%)，定位点是背景图像的右下顶点，定位距离是该点到包含框左上角顶点的距离，这个距离等于包含框的宽度和高度。
百分比可以取负值，负值的定位点是包含框的左上顶点，而定位距离则由图像自身的宽度和高度决定。
提示：CSS提供了5个关键字：left、right、center、top和bottom。这些关键字实际上就是百分比特殊值的一种固定用法。详细列表说明如下：
top left、left top = 0% 0% right top、top right = 100% 0% bottom left、left bottom = 0% 100% bottom right、right bottom = 100% 100% center、center center = 50% 50% top、top center、center top = 50% 0% left、left center、center left = 0% 50% right、right center、center right =100% 50% bottom、bottom center、center bottom = 50% 100% 1.4、设置固定背景在默认情况下，背景图像能够跟随网页内容上下滚动。可以使用background-attachment属性定义背景图像在窗口内固定显示，具体用法如下：
background-attachment：fixed | local | scroll默认值为scroll，具体取值说明如下：
fixed：背景图像相对于浏览器窗体固定。scroll：背景图像相对于元素固定。也就是说，当元素内容滚动时，背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。local：背景图像相对于元素内容固定。也就是说，当元素内容滚动时，背景图像也会跟着滚动。此时不管元素本身是否滚动，当元素显示滚动条时才会看到效果。该属性值仅CSS3支持。 1.6、设置定位原点background-origin属性定义background-position属性的定位原点。在默认情况下，background-position属性总是以元素左上角为坐标原点定位背景图像。使用background-origin属性可以改变定位方式。该属性的基本语法如下所示：
background-origin:border-box | padding-box | content-box;取值简单说明如下：
border-box：从边框区域开始显示背景。padding-box：从补白区域开始显示背景，为默认值。content-box：仅在内容区域显示背景。 1.6、设置剪裁区域background-clip属性定义背景图像的裁剪区域。该属性的基本语法如下所示：
background-clip:border-box | padding-box | content-box | text;取值简单说明如下:
border-box：从边框区域向外裁剪背景，为默认值。padding-box：从补白区域向外裁剪背景。content-box：从内容区域向外裁剪背景。text：从前景内容（如文字）区域向外裁剪背景。提示：如果取值为padding-box，则background-image将忽略补白边缘，此时边框区域显示为透明。如果取值为border-box，则background-image将包括边框区域。
如果取值为content-box，则background-image将只包含内容区域。
如果background-image属性定义了多重背景，则background-clip属性值可以设置多个值，并用逗号分隔。如果background-clip的属性值为padding-box，background-origin的属性值为border-box，且background-position的属性值为"top left"（默认初始值），则背景图的左上角将会被截取掉部分。
【示例】演示如何设计背景图像仅在内容区域内显示:
div { height:150px; width:300px; border:solid 50px gray; padding:50px; background:url(images/bg.jpg) no-repeat; background-size:cover; background-clip:content-box; }
background-size可以控制背景图像的显示大小。该属性的基本语法如下所示：
background-size: [取值简单说明如下：
初始值为auto。background-size属性可以设置1个或2个值，1个为必填，1个为可选。其中，第1个值用于指定背景图像的width，第2个值用于指定背景图像的height，如果只设置1个值，则第2个值默认为auto。
【示例】使用image-size属性自由定制背景图像的大小，让背景图像自适应盒子的大小，从而可以设计与模块大小完全适应的背景图像。只要背景图像长宽比与元素长宽比相同，就不用担心背景图像变形显示。
div { margin:2px; float:left; border:solid 1px red; background:url(images/img2.jpg) no-repeat center; background-size:cover; }
CSS3支持在同一个元素内定义多个背景图像，还可以将多个背景图像进行叠加显示，从而使得设计多图背景栏目变得更加容易。
【示例】使用CSS3多背景设计花边框，使用background-origin定义仅在内容区域显示背景，使用background-clip属性定义背景从边框区域向外裁剪：