目錄：

一、background-size屬性介紹

CSS3 的 background-size 屬效能調整背景圖片的大小，從而替代了用原始大小顯示圖片的預設行為。你可以隨意的縮放背景圖。

用法：background-size: length|percentage|cover|contain;

• length：設定背景圖片高度和寬度。第一個值設定寬度，第二個值設定的高度。如果只給出一個值，第二個是設定為 auto(自動)
• percentage：將計算相對於背景定位區域的百分比。第一個值設定寬度，第二個值設定的高度。如果只給出一個值，第二個是設定為"auto(自動)"
• cover：此時會保持影象的縱橫比並將影象縮放成將完全覆蓋背景定位區域的最小大小
  。
• contain：此時會保持影象的縱橫比並將影象縮放成將適合背景定位區域的最大大小。

二、演示程式碼

背景圖尺寸為220px*214px：

演示程式碼為：

<style>
    div{
        border: black 2px solid;
        width: 300px;
        height: 200px;
        background: url("img4.jpg") no-repeat;
    }
</style>

三、background-size屬性分析

1、設定固定尺寸的背景圖片

1）、background-size: 800px 300px;

2）、background-size: 100px 200px; 設定背景圖片的寬度遠遠小於自身的寬度，圖片被壓縮；同時小於div本身的寬度，無法覆蓋全部的div，出現留白。

2、背景圖片的寬高是根據自身所屬元素的寬高以百分比進行縮放

1）、background-size: 100% 100%; 完全填滿所屬元素的區域，但是應該寬高的比例圖片出現了變形。

2）、background-size: 50% 20%; 填充所屬元素的寬50% 高20%的區域，圖片出現變形。

3、背景圖片擴充套件並覆蓋填充滿整個所屬元素區域

1）、background-size: cover; 如果背景圖片尺寸大於所屬元素尺寸，則背景圖片不進行方法，正常顯示，超出部分被隱藏。 如果背景圖片尺寸小於所屬元素尺寸，則背景圖片進行等比例放大（圖片不會出現變形），直至完全覆蓋所屬元素區域，超出部分被隱藏。 優點是背景圖片全部覆蓋所屬元素區域；缺點是超出的部分會被隱藏。

4、背景圖片尺寸寬度和高度完全適應內容區域

1）、background-size: contain; 對背景圖片進行等比例的放大/縮小處理，直至背景圖片能夠完完整整的展示出來。 優點是圖片不會出現變形，同時背景圖片被完全展示出來；缺點是當所屬元素的寬高比與背景圖片的寬高比不同時，會出現背景留白。