<p>正如我之前所说，文档树中的每个元素都是一个方盒。每个盒都有背景层，它可以是完全透明的、有颜色的或一张图片。背景层由 8 个 CSS 属性（和 1 个简写属性）控制。</p>    <h2>background-color</h2>    <p>background-color 属性设置元素背景颜色。它的值可以是一个合法的颜色值或 transparent 关键字。</p>    <pre>  <code class="language-css">.left{ background-color: #ffdb3a; }  .middle{ background-color: #67b3dd; }  .right{ background-color: transparent; }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8ec8e431964b9e0742846e593d732f03.png"></p>    <p>背景颜色绘制在由 background-clip 属性指定的盒模型区域内。如果同时设置了背景图片，颜色层会在它们后面。不像图片层可以设置多个，每个元素只拥有一个颜色层。</p>    <h2>background-image</h2>    <p>background-image 属性为元素定义一个（或多个）背景图片。它的值通常是用   url()  符号定义的图片  url。 none 也是允许的，它会被当做空的一层。</p>    <pre>  <code class="language-css">.left{ background-image: url('ire.png'); }  .right{ background-image: none; }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/114e4efd7099aed44ea1d309234a9a1b.png"></p>    <p>我们也可以指定多个背景图片，用逗号隔开。沿着 z 轴从前向后依次绘制每个图片。</p>    <pre>  <code class="language-css">.middle{      background-image: url('khaled.png'), url('ire.png');      /* Other styles */      background-repeat: no-repeat;      background-size: 100px;  }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4eb505648bf1155e0525ddad869dcf43.png"></p>    <h2>background-repeat</h2>    <p>在 background-size 指定大小和 background-position 指定位置后， background-repeat 属性控制如何平铺背景图片。</p>    <p>属性值可以是以下关键字之一： repeat-x 、 repeat-y 、 repeat 、 space 、 round 、 no-repeat 。除了前两个（ repeat-x  和  repeat-y ）之外，其他关键字可以写一次来同时定义 x 轴和 y 轴，或分开定义两个维度。</p>    <pre>  <code class="language-css">.top-outer-left{ background-repeat: repeat-x; }  .top-inner-left{ background-repeat: repeat-y; }  .top-inner-right{ background-repeat: repeat; }  .top-outer-right{ background-repeat: space; }     .bottom-outer-left{ background-repeat: round; }  .bottom-inner-left{ background-repeat: no-repeat; }  .bottom-inner-right{ background-repeat: space repeat; }  .bottom-outer-right{ background-repeat: round space; }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e5bb8401bd15782a427445951085bcdb.png"></p>    <h2>background-size</h2>    <p>background-size 属性定义背景图片的大小。它的值可以是一个关键字、一个长度或一个百分比。</p>    <p>属性可用的关键字是 contain 和 cover 。 contain 会按图片比例将其放大至宽和高完全适应区域，与之相反， cover 会将图像调整至能够完全覆盖该区域的最小尺寸。</p>    <pre>  <code class="language-css">.left{      background-size: contain;      background-image: url('ire.png');      background-repeat: no-repeat;  }  .right{      background-size: cover;      /* Other styles same as .left */  }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d4fe1cdc3e43363de564bef95be4d701.png"></p>    <p>对于长度值和百分比，我们可以用来定义背景图片的宽高。百分比值根据元素的尺寸来计算。</p>    <pre>  <code class="language-css">.left{ background-size: 50px; /* Other styles same as .left */ }  .right{ background-size: 50% 80%; /* Other styles same as .left */ }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0d28f390e9fddc686561eb06d01f4128.png"></p>    <h2>background-attachment</h2>    <p>background-attachment 属性控制背景图片在可视区和元素中如何滚动。它有三个可能的值。</p>    <p>fixed 意思是背景图片相对于可视区固定，即使用户滚动可视区时也不移动。 local 意思是背景在元素中位置固定。如果元素有滚动机制，背景图片会相对于顶端定位，当用户滚动元素时，背景图片会离开视野。最后， scroll 意思是背景图片固定，不会随着元素内容滚动。</p>    <pre>  <code class="language-css">.left {      background-attachment: fixed;      background-size: 50%;      background-image: url('ire.png');      background-repeat: no-repeat;      overflow: scroll;  }  .middle {      background-attachment: local;      /* Other styles same as .left */  }  .right {      background-attachment: scroll;      /* Other styles same as .left */  }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/948f9886a2eabc5a6bd2408ee3debfd2.gif"></p>    <h2>background-position</h2>    <p>这个属性，结合 background-origin 属性，定义了背景图片起始位置。它的值可以是一个关键字、一个长度或一个百分比，我们可以依次定义 x 轴和 y 轴的位置。</p>    <p>可用的关键字有 top 、 right 、 bottom 、 left 和 center 。我们可以任意组合使用，如果只指定了一个关键字，另一个默认是 center 。</p>    <pre>  <code class="language-css">.top-left {      background-position: top;      background-size: 50%;      background-image: url('ire.png');      background-repeat: no-repeat;  }  .top-middle {      background-position: right;      /* Other styles same as .top-left */  }  .top-right {      background-position: bottom;      /* Other styles same as .top-left */  }  .bottom-left {      background-position: left;      /* Other styles same as .top-left */  }  .bottom-right {      background-position: center;      /* Other styles same as .top-left */  }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/06e6b43f7a3dd9b8425d266fe864839a.png"></p>    <p>对于长度值和百分比值，我们也可以依次定义 x 轴和 y 轴的位置。百分比值与容器元素相关。</p>    <pre>  <code class="language-css">.left{ background-position: 20px 70px; /* Others same as .top-left */ }  .right{ background-position: 50%; /* Others same as .top-left */ }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/57b1506e9dd37877629b67173ae7d5ea.png"></p>    <h2>background-origin</h2>    <p>background-origin 属性定义背景图片根据盒模型的哪个区域来定位。</p>    <p>可用的值有 border-box ，图片相对于边框（Border）定位， padding-box ，图片相对于内边距框（Padding）定位， content-box ，图片相对于内容框（Content）定位。</p>    <pre>  <code class="language-css">.left {      background-origin: border-box;      background-size: 50%;      background-image: url('ire.png');      background-repeat: no-repeat;      background-position: top left;      border: 10px dottedblack;      padding: 20px;  }  .middle {      background-origin: padding-box;      /* Other styles same as .left*/  }  .right {      background-origin: content-box;      /* Other styles same as .left*/  }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ab1e371f5a3581c8156aab90a41a169e.png"></p>    <h2>background-clip</h2>    <p>background-clip 属性决定背景绘制区域，也就是背景可以被绘制的区域。像 background-origin 属性一样，它也基于盒模型。</p>    <pre>  <code class="language-css">.left{      background-clip: border-box;      background-size: 50%;      background-color: #ffdb3a;      background-repeat: no-repeat;      background-position: top left;      border: 10px dotted black;      padding: 20px;  }  .middle{      background-clip: padding-box;      /* Other styles same as .left*/  }  .right{      background-clip: content-box;      /* Other styles same as .left*/  }  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c2c0c48f04849222f70fa5f636887ea7.png"></p>    <h2>background</h2>    <p>最后， background 属性是其他背景相关属性的简写。子属性的顺序并没有影响，因为每个属性值的数据类型不同。然而，对于 background-origin  和  background-clip 属性，如果只指定了一个盒模型区域，会应用到两个属性。如果指定了两个，第一个设置为 background-origin 属性。</p>    <p> </p>    <p>来自：http://web.jobbole.com/90616/</p>    <p> </p>