CSS3屬性background-size的使用方法

這篇文章主要講解了“CSS3屬性background-size的使用方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3屬性background-size的使用方法”吧！

background-size 設置背景圖片大小。

代碼如下:

/* 關鍵字 */
background-size: cover
background-size: contain
/* 一個值: 這個值指定圖片的寬度，圖片的高度隱式的為auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* 兩個值: 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* 逗號分隔的多個值：設置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit

Values
<length>
<length> 值，指定背景圖片大小，不能為負值。
<percentage>
<percentage> 值，指定背景圖片相對背景區（background positioning area）的百分比。背景區由background-origin設置，默認為盒模型的內容區與內邊距，也可設置為只有內容區，或者還包括邊框。如果attachment 為fixed，背景區為瀏覽器可視區（即視口），不包括滾動條。不能為負值。
auto
以背景圖片的比例縮放背景圖片。
cover
縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。
contain
縮放背景圖片以完全裝入背景區，可能背景區部分空白。
位圖一定有固有尺寸與固有比例，矢量圖可能兩者都有，也可能只有一個。漸變視為只有固有尺寸或者只有固有比例的圖片。

背景圖片大小計算：

如果指定了 background-size 的兩個值并且不是auto：
背景圖片按指定大小渲染。
contain 或 cover:
保留固有比例，最大的包含或覆蓋背景區。如果圖像沒有固有比例，則按背景區大小。
auto 或 auto auto:
圖像如果有兩個長度，則按這個尺寸。如果沒有固有尺寸與固有比例，則按背景區的大小。如果沒有固有尺寸但是有固有比例， 效果同 contain。如果有一個長度與比例，則由此長度與比例計算大小。如果有一個長度但是沒有比例，則使用此長度與背景區相應的長度。
一個為 auto 另一個不是auto:
如果圖像有固有比例，則指定的長度使用指定值，未指定的長度由指定值與固有比例計算。如果圖像沒有固有比例，則指定的長度使用指定值，未指定的長度使用圖像相應的固有長度，若沒有固有長度，則使用背景區相應的長度。
注意，對于沒有固有尺寸或固有比例的矢量圖不是所有的瀏覽器都支持。特別注意測試Firefox 7- 與Firefox 8+，以確定不同之處能否接受。

Examples
background-size: cover 演示 與  background-size: contain 演示 在新窗口打開，這樣你可以看到當背景區大小變化時 contain 與 cover 是怎樣的。 系列演示：background-size 及其與background-*屬性的關聯  很好的說明了單獨使用 background-size 及與其它屬性共同使用。

Notes
如果用漸變作為背景并且對它使用了background-size ，最好不要只用一個auto， 或者只指定一個寬度值 (例如 background-size: 50%)。對這兩種情況 Firefox 8有所改變， 并且目前各瀏覽器表現不一致，不是全部瀏覽器都完全支持 CSS3 background-size 規范 與 CSS3 Image Values gradient 規范。

代碼如下:

.bar {
      width: 50px; height: 100px;
      background-image: gradient(...);
      /* 不推薦 */
      background-size: 25px;
      background-size: 50%;
      background-size: auto 50px;
      background-size: auto 50%;
      /* 可行 */
      background-size: 25px 50px;
      background-size: 50% 50%;
}

特別不推薦對漸變px與auto一起用, 因為Firefox 8之前不能重復渲染，并且對于沒有實現Firefox 8渲染特性的瀏覽器，不知道指定了背景的元素的確切大小。

IE9及以上才支持。

感謝各位的閱讀，以上就是“CSS3屬性background-size的使用方法”的內容了，經過本文的學習后，相信大家對CSS3屬性background-size的使用方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！