CSS3 background-size

admin發表於2018-07-21
CSSS3

CSS3屬性相較而言，比CSS2屬性掌握起來稍稍難一點，但是以人類的智商掌握它們還是很輕鬆的。

為了更加輕鬆的掌握並熟練的使用它們，學習方式也是很重要的。

background-size是單詞background和size的組合體，屬性的命名和它的功能有直接的聯絡。

由此，我們很自然的聯想到，此屬性是用來控制背景圖片大小的，事實也的確如此。

語法結構：

[CSS] 純文字檢視 複製程式碼
background-size: length|percentage|cover|contain;

屬性值既可以是精確數值也可以是百分比，也可以是auto（預設）。

cover和contain屬性值是固定的，後面會有專門例子演示。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
background-size:200px 100px;
background-size:50% 50%;
background-size:auto;

（1）.只有一個引數，規定背景圖片的寬度，此時背景圖片的高度是按照寬度進行等比例縮放。

（2）.兩個引數，第一個規定背景圖片寬度，第二個規定背景圖片的高度。

程式碼例項如下:

[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:450px; 
  height:300px; 
  border:5px solid green; 
  list-style:none; 
} 
.test{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:200px 100px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="test"></li>  
</ul> 
</body> 
</html>

上述程式碼規定兩個引數，第一個規定背景圖片的寬度為200px，第二個引數規定背景圖片的高度為100px。

[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:450px; 
  height:300px; 
  border:5px solid green; 
  list-style:none; 
  margin-top:10px;
} 
.first{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:200px; 
  background-repeat:no-repeat; 
} 
.second{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:600px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="first"></li>  
  <li class="second"></li>  
</ul> 
</body> 
</html>

只規定一個引數，這時此引數規定背景圖片的寬度，高度根據寬度值等比縮放，如果背景圖片的尺寸超過容器，將會被裁切。

如果屬性值是auto，那麼背景圖按照原尺寸顯示。

一.cover屬性值：

cover翻譯成中有“覆蓋”的意思。

屬性值設定為cover，背景圖片等比縮放至完全覆蓋容器，超出容器的尺寸將會被裁切。

程式碼例項如下:

[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:450px; 
  height:300px; 
  border:5px solid green; 
  list-style:none; 
  margin-top:10px;
} 
.test{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:cover; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="test"></li>  
</ul> 
</body> 
</html>

背景圖片完全覆蓋容器，如果背景圖片長寬比喻容器的長寬比不同，必然會出現橫向或者縱向上超出容器的情況，超出的將會被隱藏。

二.contain屬性值：

與cover屬性值類似，也可以將圖片等比例放大或者縮小，不同點如下：

（1）.cover是最小限度的將容器的覆蓋。

（2）.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:450px; 
  height:300px; 
  border:5px solid green; 
  list-style:none; 
  margin-top:10px;
} 
.test{ 
  background-image:url(mytest/demo/small.jpg); 
  background-size:contain; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="test"></li>  
</ul> 
</body> 
</html>

背景圖片進行等比例縮放，由於在縱向上最先達填充完容器元素，所以在橫向上就放棄嘗試。

相關文章