CSS background-size

admin發表於2019-11-22
CSS

background-size屬性用於規定背景圖片的尺寸，其名稱也反映了這一點。

在此前，很難精確的控制背景圖片的尺寸，只能進行重複或者固定等簡單操作。

下面通過程式碼例項詳細介紹一下background-size屬性的用法。

語法結構：

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

下面通過程式碼例項詳細演示一下各個屬性值是如何控制背景圖片尺寸。

一.length|percentage|auto：

background-size屬性值可以使具體的資料，比如length或者percentage形式。

也可以是關鍵字形式，例如auto、cover和contain。

由於length、percentage和auto可以組合使用，所以將它們放在一起介紹。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:200px 100px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/161236mc2v9yvf9uetif38.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對程式碼進行一下簡單分析：

（1）.background-size如果有兩個屬性值，那麼第一個規定寬度，第二個規定高度。

（2）.所以上述程式碼規定背景圖片的寬度是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"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:200px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/161915dh19aah1s91z9tyb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對程式碼進行一下簡單分析：

（1）.background-size如果只有一個屬性值，那麼第一個規定寬度，第二個預設值為auto，規定高度。

（2）.此時，背景圖片的高度值會根據寬度值進行等比例縮放。

（3）.背景圖片的原始尺寸是200x100，由於寬度是200px，所以高度也自動縮放為100px。

（4）.縮放的參考的是圖片的原始尺寸，而不是容器的尺寸。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:50% 100px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/161950nbnbskkgekkspgnb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對程式碼進行一下簡單分析：

（1）.規定背景圖片的寬度是50%，原圖的寬度是200,px，所以背景圖呈現100px寬度。

（2）.規定背景圖片的高度是100px。

二.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"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:cover; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/162046cj2twwtv222tg4by.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對程式碼進行一下簡單分析：

（1）.容器的尺寸是250x150，背景圖片原始大小是200x100。

（2）.如果要完全鋪滿容器，背景圖片需要放進行按照比例放大處理。

（3）.橫向超出的尺寸將被裁切。

三.contain：

contain返回成漢語具有"容納"或者"包含"的意思。

此屬性值規定容器元素要完全包含背景圖片，且至少某一方位完全鋪滿容器。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:contain; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/162120k8a78jl6jxzjja0b.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對程式碼進行一下簡單分析：

（1）.首先容器元素必須完全容納背景圖片，不存在裁切的情況。

（2）.至少在高度或者寬度上鋪滿容器，如果背景圖片和容器寬高比例相同，那麼會完全鋪滿。

（3）.容器的尺寸是250x150，背景圖片原始大小是200x100。

（4）.寬度比250/200=1.25，高度比150/100=1.5。

（5）.所以需要放大背景圖片的寬度，在橫向上鋪滿容器。

（6）.如果放大高度，那麼寬度就會超出容器，違背不存在裁切的原則。

四.作用於多個背景圖片：

此屬性可以規定多組屬性值作用於多個背景圖片。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.bg{
  width:215px;
  height:165px;
  background-attachment:scroll,scroll,scroll,scroll;
  background-clip:border-box;
  background-color:transparent;
  background-image:url(mytest/demo/top-left.jpg),
  url(mytest/demo/top-right.jpg),
  url(mytest/demo/bottom-left.jpg),
  url(mytest/demo/bottom-right.jpg);
  background-origin: border, border, border, border;
  background-origin:border-box, border-box, border-box, border-box;
  background-position:left top, right top, left bottom, right bottom;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:55px 45px, auto auto, auto auto, auto auto;
}
</style>
</head>
<body>
  <div class="bg"></div>
</body>
</html>

組與組之間採用逗號進行分割，作用順序與背景圖片的定義順序相同。

相關文章