之前说过，文档树中的每个元素只是一个矩形框。这些盒子都有一个背景层，背景层可以是完全透明的或者其他颜色，也可以是图片。这个背景层由8个CSS属性（加上1个速记属性）控制。background-colorbackground-color属性设置元素的背景颜色。它的值可以是任何合法的颜色值或透明关键字。.left{背景颜色：#ffdb3a;}.middle{背景颜色：#67b3dd;}.right{背景颜色：透明；}背景色绘制在模型区域内由[background-clip](#backgroundclip)属性指定的框中。如果还设置了任何背景图像，则在它们后面绘制颜色层。与可以有多个图像层不同，我们只能为一个元素设置一个颜色层。background-imagebackground-image属性定义一个元素的一个或多个背景图像。它的值通常是用url()表示法定义的图像的url。您也可以使用none作为它的值，但这会生成一个空的背景层。left{background-image:url('ire.png');}.right{背景图像：无；}我们也可以指定多个背景图片，用逗号分隔。后面的图片会在Z轴方向绘制在前一张图片的后面。.middle{背景图片：url('khaled.png'),url('ire.png');/*其他样式*/background-repeat:no-repeat;background-size:100px;}background-repeatbackground-repeat属性控制背景图像在由[background-size](#backgroundsize)属性调整大小并由[background-position](#backgroundposition)属性定位后如何平铺.该属性的取值可以是repeat-x,repeat-y,repeat,space,round,no-repeat关键字，除了repeat-x和repeat-y，其他值可以为x轴和repeat定义一次y轴，或者可以单独定义每个维度。.top-outer-left{background-repeat:repeat-x;}.top-inner-left{background-repeat:repeat-y;}.top-inner-right{背景重复：重复；}.top-outer-right{background-repeat:space;}.bottom-outer-left{背景重复：圆形；}.bottom-inner-left{背景重复：不重复；}.bottom-inner-right{背景重复：空格重复；}.bottom-outer-right{背景重复：圆形空间；}background-sizebackground-size属性定义了背景图像的大小，其值可以是关键字、长度或百分比。此属性可用的关键字是“包含”和“覆盖”。contain会将图像按比例缩放到可能的最大尺寸。另一方面，cover会将图像缩放到尽可能小的尺寸，整个背景区域仍然被覆盖。.left{背景大小：包含；背景图片：url('ire.png');background-repeat:no-repeat;}.right{background-size:cover;/*其他样式同.left*/}对于长度和百分比，我们可以同时指定背景图片的宽高，百分比值根据元素的大小计算。.left{背景大小：50px;/*其他样式同.left*/}.right{background-size:50%80%;/*其他样式与.left相同*/}background-attachmentbackground-attachmentpropertycontrol控制背景图像如何相对于视口和元素滚动。它具有三个潜在价值。fixed意味着背景图像固定在视口上并且不会移动，即使用户正在沿视口滚动也是如此。local表示背景图像固定在其在元素内的位置。如果元素是可滚动的并且背景图像位于顶部，那么当用户向下滚动元素时，背景图像将滚出视图。finallyscroll表示背景图片是固定的，不会随着元素的内容滚动。.left{背景附件：已修复；背景大小：50%；背景图片：url('ire.png');背景重复：不重复；overflow:scroll;}.middle{background-attachment:local;/*其他样式同.left*/}.right{background-attachment:scroll;/*其他样式同.left*/}background-position该属性结合了background-origin属性来定义背景图片的起始位置应该在哪里。它的值可以是关键字、长度或百分比，我们可以指定沿x轴和y轴的位置。可用于此属性的关键字有top、right、bottom、left和center。我们可以任意组合这些关键字。如果仅明确指定一个关键字，则另一个默认为居中。.top-left{背景位置：顶部；背景大小：50%；背景图片：url('ire.png');background-repeat:no-repeat;}.top-middle{background-position:right;/*其他样式同.top-left*/}.top-right{background-position:bottom;/*其他样式同.top-left*/}.bottom-left{background-position:left;/*其他样式同.top-left*/}.bottom-right{background-position:center;/*其他样式与.top-left相同*/}对于长度和百分比，我们还可以指定沿x轴和y轴的位置。百分比值是根据元素的大小计算的。.left{背景位置：20px70px;/*其他同.top-left*/}.right{background-position:50%;/*其他同.top-left*/}background-originbackground-origin属性指定背景图像应该定位在盒模型的哪个区域。当值为border-box时，背景图片的位置根据边框区域进行定位；为padding-box时，position根据margin区域定位；当它是content-box时，它的位置是根据内容区域来定位的。.left{背景原点：边框框；背景大小：50%；背景图片：url('ire.png');背景重复：不重复；背景位置：左上；边框：10px黑色虚线；padding:20px;}.middle{background-origin:padding-box;/*其他样式同.left*/}.right{background-origin:content-box;/*其他样式同.left*/}background-clipbackground-clip属性决定了背景绘制区域，也就是可以绘制背景的区域。和background-origin属性一样，也是基于盒模型的面积。.left{背景剪辑：边框框；背景大小：50%；背景色：#ffdb3a；背景重复：不重复；背景位置：左上；边框：10px黑色虚线；填充：20px；}.middle{背景剪辑：填充框；/*其他样式同.left*/}.right{background-clip:content-box;/*其他样式同.left*/}background最后，background属性是其他上下文相关属性的简写。子属性的顺序无关紧要，因为每个属性都有不同的数据类型。但是，对于background-origin和background-clip，如果只指定了一个框模型区域，则两个属性都将应用该值。如果指定了两个，那么第一个值将用于background-origin属性。
