萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css中background-size屬性使用介紹

css中background-size屬性使用介紹

 background-size的值類型:1個或2個值,這些值既可以是像素px,也可以是百分比%或auto,還可以是特定值cover, contain。

background-size可以設置2個值,1個為必填,1個為可選。
其中第1個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只給background-size設置1個值,則第2個值默認為auto高度自動 (通常默認高度是auto自動,自適用內容而增高,通常如果想高度自適應不用設置) (cover和contain特定值除外)。

復制代碼 代碼如下:
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px;
}


等價於:

復制代碼 代碼如下:
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px auto;
}


查看具體DEMO: background-size的值定義。當你使用firebug抓取到那個實例節點時,你會發現第二個值被自動加上了並且值為auto。當然,你也可以手動將第2個值設置為auto,然後與該DEMO的實例對比,它們的效果將是相同的。

background-size的特定值:

cover: 保持圖像本身的寬高比例,將圖片縮放到正好完全覆蓋定義背景的區域;
contain: 保持圖像本身的寬高比例,將圖片縮放到寬度或高度正好適應定義背景的區域;
cover值:

  代碼如下:
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:cover;
}


上例,背景圖片將覆蓋整個div區域。查看具體DEMO: background-size:cover。

contain值:

  代碼如下:
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:contain;
}


上例,背景圖將縮放到寬度或高度的任意一邊與div區域適應。查看具體DEMO: background-size:contain。

copyright © 萬盛學電腦網 all rights reserved