text.html

 
<p class="zw">大背景图像的处理是我经常头疼的事，过去我总是使用Photoshop来缩放背景图像。CSS里有一个属性——<code>background-size</code>，它使我们能够控制背景图像的尺寸。这不仅可以节省时间，也为我们开启了一扇创意的大门。</p> 
<p class="zw"><code>background-size</code>属性接受水平和垂直两个值，这些值可以使用像素或者百分比，然后再加上一个可选的关键字<code>cover</code>或<code>contain</code>。</p> 
<pre class="代码无行号"><code>.item__img { 
background-size : 100% 50% contain; }</code></pre> 
<p class="zw">我们从一个元素开始，它的尺寸是<code>310px</code>×<code>200px</code>，我们给它添加一个同样尺寸的的背景图像。</p> 
<pre class="代码无行号"><code>.item__img { 
width : 200px; 
height : 310px; 
background-image : url(magazine.jpg); }</code></pre> 
<p class="zw">当元素和背景图像尺寸相同时，这没什么问题，但是当客户想要改变这里的设计时，没关系，<code>background-size</code>可以解决这个问题，我们也不必再使用软件重新处理图像。</p> 
<table border="1" width="90%"> 
 <tbody>
  <tr> 
   <td>像素单位</td> 
   <td>使用像素单位来定义背景图的尺寸</td> 
  </tr> 
  <tr> 
   <td>百分比</td> 
   <td>相对与元素尺寸的百分比来指定背景图的尺寸</td> 
  </tr> 
  <tr> 
   <td><code>cover</code></td> 
   <td>背景图等比缩放直到覆盖满整个元素</td> 
  </tr> 
  <tr> 
   <td><code>contain</code></td> 
   <td>背景图等比缩放后完全包含在元素中</td> 
  </tr> 
 </tbody>
</table>