CSS 屬性篇(六)：background-size屬性

1、background-size屬性介紹

CSS3 的 background-size 屬性能調整背景圖片的大小，從而替代了用原始大小顯示圖片的默認行爲。你能夠隨意的縮放背景圖。

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

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

2、演示代碼

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

演示代碼爲：

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

3、background-size屬性分析

一、設置固定尺寸的背景圖片

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

設置背景圖片的寬高比與圖片自己的寬高比不一樣，致使圖片出現變形；同時設置背景圖片的尺寸遠遠超出了div自己定義的尺寸，超出的部分被隱藏了。

---

2）、background-size: 100px 200px;

設置背景圖片的寬度遠遠小於自身的寬度，圖片被壓縮；同時小於div自己的寬度，沒法覆蓋所有的div，出現留白。

---

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

1）、background-size: 100% 100%;

徹底填滿所屬元素的區域，可是應該寬高的比例圖片出現了變形。

---

2）、background-size: 50% 20%;

填充所屬元素的寬*50% 高*20%的區域，圖片出現變形。

---

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

1）、background-size: cover;

若是背景圖片尺寸大於所屬元素尺寸，則背景圖片不進行方法，正常顯示，超出部分被隱藏。
若是背景圖片尺寸小於所屬元素尺寸，則背景圖片進行等比例放大 （圖片不會出現變形），直至徹底覆蓋所屬元素區域，超出部分被隱藏。
優勢是背景圖片所有覆蓋所屬元素區域；缺點是超出的部分會被隱藏。

---

四、背景圖片尺寸寬度和高度徹底適應內容區域

1）、background-size: contain;

對背景圖片進行等比例的放大/縮小處理，直至背景圖片可以完完整整的展現出來。
優勢是圖片不會出現變形，同時背景圖片被徹底展現出來；缺點是當所屬元素的寬高比與背景圖片的寬高比不一樣時，會出現背景留白。