像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写的属性）控制。
background-color
background-color属性设置元素的背景颜色。它的值可以是任意合法的颜色值或者是transparent关键字。
.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }
背景颜色绘制在由
[background-clip]（＃backgroundclip）属性指定的盒模型的区域内。如果还设置了任何背景图像，则在它们后面绘制颜色层。与可以有多个的图像层不同，对于一个元素，我们只能有一个颜色层。background-image
background-image属性定义元素的一个或多个背景图像。它的值通常是用url（）符号定义的图像的url。也可以使用none作为它的值，但这样会生成一个空的背景层
.left { background-image: url('ire.png'); }
.right { background-image: none; }
我们也可以指定多张背景图片并通过逗号分隔。后面的图片都会绘制在Z轴方向上前一个图片的后面。
.middle {
background-image: url('khaled.png'), url('ire.png'); /* Other styles */
background-repeat: no-repeat;
background-size: 100px;
}
background-repeat
background-repeat属性控制背景图片在被
[background-size]（＃backgroundsize）属性改变了大小及被
[background-position]（＃backgroundposition ）属性定位后如何平铺。该属性的值可以是
repeat-x, repeat-y, repeat, space, round, no-repeat关键字，除了repeat-x和repeat-y,其他值可以为x轴和y轴定义一次，也可以单独定义每个维。
.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
