background-size屬性用法簡單介紹

antzone發表於2017-03-14

這是一個css3的屬性，毫無因為IE8和IE8以下瀏覽器對它不感冒。

不過這一切都不是問題，隨著時間的 推移，它必將迎來嶄新的時代。

既然它有如此輝煌的前景，所以還是儘快掌握比較好，下面就通過程式碼例項介紹一下它的用法。

基本語法:

background-size的屬性值可以有如下形式:

1.兩個值的時候，值可以是畫素、百分比或者auto，當值是auto的時候表示背景圖真實尺寸大小，當然有可能被元素裁切。

2.一個值的時候，只可以是畫素、百分比或者auto，另外一個值預設為auto。

3.一個值的情況也可能是cover或者contain。cover表示背景圖片等比例縮放覆蓋整個元素背景，有可能會被裁切。contain表示將背景影像等比縮放到寬度或高度與容器的寬度或高度相等，背景影像始終被包含在容器內。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  width:150px;
  height:200px;
  border:5px solid green;
  margin-top:10px;
  list-style:none;
}
.auto{
  background-image:url(mytest/demo/small.jpg);
  background-size:auto;
  background-repeat:no-repeat;
}
.length{
  background-image:url(mytest/demo/small.jpg);
  background-size:100px 100px;
  background-repeat:no-repeat;
}
.percentage{
  background-image:url(mytest/demo/small.jpg);
  background-size:50% 50%;
  background-repeat:no-repeat;
}
.cover{
  background-image:url(mytest/demo/small.jpg);
  background-size:cover;
  background-repeat:no-repeat;
}
.contain{
  background-image:url(mytest/demo/small.jpg);
  background-size:contain;
  background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
  <li class="auto"></li>
  <li class="length"></li>
  <li class="percentage"></li>
  <li class="cover"></li>
  <li class="contain"></li>
</ul>
</body>
</html>

相關文章