CSS3：background-size背景圖片尺寸屬性

時間 2019-11-11

標籤 css3 css background size 背景圖片尺寸屬性欄目 CSS 简体版

原文原文鏈接

background-size能夠設置背景圖片的大小，數值包括長度length和百分比percentage。而且會根據背景原點位置background-origin設置其圖片覆蓋的範圍。那麼下面咱們一塊兒來了解這個background-size屬性吧。 css

background-size語法

w3c對background-size的語法規定以下： web

屬性名:	background-size
屬性值:	<bg-size>* 其中 bg-size = [ <length> \| <percentage> \| auto ]{1,2} \| cover \| contain
初始值:	auto auto
應用於:	全部元素
繼承性:	無
百分比:	見下文註解
計算值:	根據指定

語法解釋 瀏覽器

一、length，percentage，根據給定長度值或者百分比來調整背景圖片大小。auto爲默認值，這三個值最小可重複一次，最大重複兩次。對於這些值有如下解釋：
第一個值爲設置圖片寬度，第二個值爲圖片的高度；可是無論是用什麼值，都不能爲負值
假如只給定一個值，那麼第二個自動的爲 'auto'；
假如指定爲percentage百分比值，那麼背景圖大小是根據相對的背景區域來作調整，這個背景區域是由background-origin來來決定的。這在上面已經有提到過了關於圖片原點的討論。這裏有必要提到假如background-attachment:fixed，那麼其背景相對區域就是初始包含塊也就是視窗。 app

/* 一個值: 這個值指定圖片的寬度，那麼第二個值爲auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px

/* 兩個值: 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，請用逗號隔開，在CSS語法中凡語法後跟*或者#，都是能夠無限重複的，可是必須用逗號隔開。 */
background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit


  

  

   
   
   
   
   

   
 
    1  
 
    2  
 
    3  
 
    4  
 
    5  
 
    6  
 
    7  
 
    8  
 
    9  
 
    10  
 
    11  
 
    12  
 
    13  
 
    14  
 
    15  
 
    16  
 
    17  
 
    18  
 
    19  
 
    20

代碼laycode - v1.1

二、contain，按比例調整背景圖片，使得其圖片寬高比自適應整個元素的背景區域的寬高比，所以假如指定的圖片尺寸過大，而背景區域的總體寬高不能剛好包含背景圖片的話，那麼其背景某些區域可能會有空白。看如下代碼 webapp

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*圖片的寬高爲440*440，而元素相對區域高度爲50*/ 
    background-size:contain;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相對區域寬度爲50*/ 
    background-size:contain;
}


  

  

   
   
   
   
   

   
 
    1  
 
    2  
 
    3  
 
    4  
 
    5  
 
    6  
 
    7  
 
    8  
 
    9  
 
    10  
 
    11  
 
    12  
 
    13  
 
    14  
 
    15  
 
    16

代碼laycode - v1.1

當圖片剛好自適應鋪滿元素的寬度或者高度，那麼元素的會有空白處存在，也就是圖中紅色框框都顯示了空白。

二、cover，按比例調整背景圖片，這個屬性值跟contain正好相反，背景圖片會按照好比自適應鋪滿整個背景區域。假如背景區域不足以包含背景圖片的話，那麼背景圖片就會被咔嚓。 ui

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*圖片的寬高爲440*440，而元素相對區域高度爲50*/ 
    background-size:cover;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相對區域寬度爲50*/ 
    background-size:cover;
}


  

  

   
   
   
   
   

   
 
    1  
 
    2  
 
    3  
 
    4  
 
    5  
 
    6  
 
    7  
 
    8  
 
    9  
 
    10  
 
    11  
 
    12  
 
    13  
 
    14  
 
    15  
 
    16

代碼laycode - v1.1

當使用了cover這個值的時候，那麼正好就跟contain相反，其會正好覆蓋整個背景相對區域，可是背景圖片的某些部分就看不見，以下圖的狗的下半身和右側身體顯示不全。

說說背景圖片計算值

假如說只是拿單一的數值或者具體數值來解釋那理解起來應該不難，但假如用混合長度來講，可能會有點一會兒明白不上來。 url

規範給了幾個例子，不妨拿出來一下：先聲明，因此的元素尺寸爲 100*100 spa

100% 100%背景圖片將鋪滿整個內容區，假如說元素有固有寬高，那麼背景圖片鋪滿整個100*100背景區域

div {
    background-image: url(plasma.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box }
背景圖片調整爲寬度爲50*50，可是背景圖片的原點位置爲邊框box而不是padding-box
p {
    background-image: url(tubes.png);
    background-size: 50% auto;
    background-origin: border-box }
背景圖片尺寸調整爲15*15
para {
    background-size: 15px 15px;
    background-image: url(tile.png)}
這是默認值，也就是auto auto，此時背景圖片的尺寸將會是跟圖片的固有尺寸同樣.

body {
    background-size: auto;            /* 默認值 */
    background-image: url(flower.png) }
假如兩個都是百分比，此時圖片就會根據背景區域來按照寬高比自適應，此處背景圖片爲20*30，可是由於背景重複用了 'round'循環，所以背景區域高度劃分了3個33.3等高區域，因此背景圖片會自適應調整爲20*33.3
p {
    background-image: url(chain.png);
    background-repeat: no-repeat round;
    background-size: 20% 30% }


  

  

   
   
   
   
   

   
 
    1  
 
    2  
 
    3  
 
    4  
 
    5  
 
    6  
 
    7  
 
    8  
 
    9  
 
    10  
 
    11  
 
    12  
 
    13  
 
    14  
 
    15  
 
    16  
 
    17  
 
    18  
 
    19  
 
    20  
 
    21  
 
    22  
 
    23  
 
    24  
 
    25  
 
    26  
 
    27  
 
    28  
 
    29  
 
    30  
 
    31

代碼laycode - v1.1

在MND幫助文檔中還提到了關於火狐的漸變圖片背景問題，不過那是涉及到Firefox8，規範中不推薦同時使用px和auto，由於在8之前的火狐瀏覽器不支持重複渲染，可是我在caniuse上看見的版本是31+，so，你就盡情的用吧。而且對於移動瀏覽器的支持仍是很是的好的，請看下圖可知，除了opera8部分不支持之外：設計

應用場景

目前用到background-size的場景都是基於webapp的背景圖上，大體的狀況是，好比說最多見的logo做爲某個元素的背景，但logo很複雜，假如說咱們按照設計圖上的去切片的話，那會有兩種可能：
一、按照csser的分辨率去切片，好比高度爲50px，logo被直接縮放到50px那就會很彆扭，並且估計那那畫面太美，你都不敢看；
二、按照射擊溼設計的分辨率去切的話，有可能設計圖的logo尺寸會很大，可是咱們csser寫的時候高度只有50px，那logo就會顯示不全； code

這時候background-size就發揮其重要的做用了，咱們能夠經過對背景圖片大小的自適應縮放，而不會影響到起美觀性又能所有顯示咱們所須要的效果。

直接甩出你的手機出來吧。。。↓

參考資料： http://dev.w3.org/csswg/css-backgrounds/#background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Notes