close

指定背景圖片大小
background-size：bg-size , bg-size
bg-size = auto | length | percentage | cover | contain

  • 預設值為auto，即後臺圖片原始長寬。
  • length指定圖片具體巨細的數值，不答應負值。
  • percentage以佈景圖所在元素的百分比指定背景圖大小，不答應負值。
  • length與percentage可設定2數值，也可只設定1個數值，當只設定一個數值，另外一個數值(高)預設值為auto，此時高度以靠山圖原始寬高比例，主動縮放。
  • cover首要用於背景圖小於地點的內容，而後臺圖又不合適利用repeat，此時就可以採用cover的體例，使配景圖放大至內容的大小，但此方式輕易使後臺圖因放大而失真。
  • contain與cover正好相反，首要用於背景圖大於所在內容，但卻需要將後臺圖完全顯現，此時便可採用contain的方式，使配景圖縮小至內容的巨細。

結果呈現為了讓出現效果有較著的區別，範例中的屬性預設為：
width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;
 

CSS 3背景新屬性：background-size 網頁設 範例中所利用的後臺圖(100px*122px)

background-size：auto;

  1. -moz-background-size:auto;        /*for Firefox*/
  2. -webkit-background-size:auto;        /*for Google Chrome、Safari*/
  3. -o-background-size:auto;        /*for Opera*/
  4. background-size:auto;        /*for IE*/
複製代碼



 

CSS 3背景新屬性：background-size 網頁設 CSS 3背景新屬性：background-size 網頁設auto取自原佈景圖片的尺寸不作任何的點竄，所以出現結果和沒加background-size效果是一樣的。

background-size：length

指定後臺圖片寬度200px高度150px

  1. -moz-background-size:200px 150px;
  2. -webkit-background-size:200px 150px;
  3. -o-background-size:200px 150px;
  4. background-size:200px 150px;
網頁設計 複製代碼


 

CSS 3背景新屬性：background-size 網頁設 雖可肆意指定圖片巨細，但如果數值沒取好，容易使配景圖變形失真，如同此範例。


指定靠山圖片寬度200px高度auto
 

  1. -moz-background-size:200px;
  2. -webkit-background-size:200px;
  3. -o-background-size:200px;
  4. background-size:200px;
複製代碼


 

CSS 3背景新屬性：background-size 網頁設 此規範和上個範例，都是設定背景圖片寬為200px，但不同點在於此典範榜樣的高度為auto，高度是共同寬度作比例的縮放，此為它的長處。

background-size：percentage

指定靠山圖片寬度50%高度100%
 

  1. -moz-background-size:50% 100%;
  2. -webkit-background-size:50% 100%;
  3. -o-background-size:50% 100%;
  4. background-size:50% 100%;
複製代碼

 

CSS 3背景新屬性：background-size 網頁設 背景圖可依內容元素的寬高，作百分比的縮放，一樣要注意數值的設定，避免後臺圖片變形失真，猶如範例。網頁設計


指定佈景圖片寬度50%高度auto
 

  1. -moz-background-size:50%;
  2. -webkit-background-size:50%;
  3. -o-background-size:50%;
  4. background-size:50%;
複製代碼



 

CSS 3背景新屬性：background-size 網頁設 此規範和上個類型，都是設定背景圖片寬為50%，但分歧點在於此典範榜樣的高度為auto，高度是共同寬度作比例的縮放，此為它的長處。

background-size：cover
 

  1. -moz-background-size:cover;
  2. -webkit-background-size:cover;
  3. -o-background-size:cover;
  4. background-size:cover;
網頁設計 複製代碼


 

CSS 3背景新屬性：background-size 網頁設 cover使背景圖不靠repeat，占滿全部內容版面。

background-size：contain

contain主要用於佈景圖大於地點內容，由於背景圖尺寸(100px*122px)，所以將此範例內容元素屬性設為width:50px;height:61px;
 

  1. -moz-background-size:contain;
  2. -webkit-background-size:contain;
  3. -o-background-size:contain;
  4. background-size:contain;
複製代碼


 

 

 

 

 

 

 

 

CSS 3背景新屬性：background-size 網頁設

 contain使配景圖在尺寸大於內容元素的情況下，得以完全呈現。

CSS 3 瀏覽器支援狀況

  • Firefox(3.63+較好支援)
  • Google Chrome(5+較好支援)(P.S：Google瀏覽器自動更新，不需憂慮利用到舊版)
  • Internet Explorer(IE6、IE7 不支援、IE8 很少支援)
  • Opera(10+部份支援)
  • Safari(4+較好支援)



來源：http://www.kip.com.tw/modules/news/article.php?storyid=35



來自:
arrow
arrow
    文章標籤
    網頁設計
    全站熱搜
    創作者介紹
    創作者 valeritmfov8 的頭像
    valeritmfov8

    苗栗網頁設計

    valeritmfov8 發表在 痞客邦 留言(0) 人氣()