CSS background-origin

admin發表於2019-11-21
CSS

通過 background-position 屬性可以設定背景圖片位置，必須以一個座標系為參考，對背景圖片進行定位操作。

預設，座標系原點是元素 border-box 左上角位置，向左為 x 軸正方向，向下為 y 軸正方向。

圖示演示如下：

螞蟻部落演示圖片

通過 background-origin 屬性可以改變此座標系的預設原點位置。

語法結構：

[CSS] 純文字檢視 複製程式碼
background-origin:border-box|padding-box|content-box

下面通過程式碼例項詳細介紹一下每一個屬性值的功能。

一.border-box：

它是預設屬性值，規定座標系的預設原點位置在 border-box 區域的左上角。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  background-repeat:no-repeat;
}
.border-box{ 
  background-origin:border-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body>
  <div class="border-box"></div> 
</body> 
</html>

對上述程式碼分析如下：

（1）.background-origin屬性值為border-box。

（2）.也就是座標系原點為border-box區域的左上角。

（3）.所以背景圖片是從邊框左上角開始渲染，包括邊框區域。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/122903mob4cz100cm0hcbt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.padding-box：

此屬性值規定座標系的預設原點位置在padding-box區域的左上角。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  background-repeat:no-repeat;
}
.border-box{ 
  background-origin:padding-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body>
  <div class="border-box"></div> 
</body> 
</html>

對上述程式碼分析如下：

（1）.background-origin屬性值為padding-box。

（2）.也就是座標系原點為padding-box區域的左上角。

（3）.所以背景圖片從padding區域開始繪製渲染，包括padding區域。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/122931uufhghn3s8zfgutg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.content-box：

此屬性值規定座標系的預設原點位置在content-box區域的左上角。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  background-repeat:no-repeat;
}
.border-box{ 
  background-origin:content-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body>
  <div class="border-box"></div> 
</body> 
</html>

對上述程式碼分析如下：

（1）.background-origin屬性值為content-box。

（2）.也就是座標系原點為content-box區域的左上角。

（3）.所以背景圖片從內容區域開始繪製渲染。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/122958x1thijir8mjjjrsm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

屬性總體比較簡單，如果對本文有任何疑問可以在文章底部留言。

相關文章