CSS3 background-origin

admin發表於2018-07-30
CSSS3

大神們學習一門新語言比較快，除了本身思維能力強大以外，還有一個很大的原因就是技術都是相通的。

比如C#中的類與Java中的類大同小異，基本可以說一模一樣，CSS也是如此。

background-origin屬性就和transform-origin比較類似。

origin翻譯成漢語是“原點”的意思，在數學上，原點是座標軸的交匯點，CSS中大致如此。

transform-origin用來設定變換的原點位置，background-origin則是用來設定背景圖片的原點位置。

語法結構：

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

規定元素中背景圖片開始繪製的位置，當然開始繪製的位置和屬性值有關，下面分別做一下介紹。

一.border-box：

此屬性值規定背景圖片從border區域開始繪製（包括border），座標原點在左上角。

程式碼例項如下：

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

由以上程式碼可以看出背景圖片是從邊框開始渲染的，包括邊框區域，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/05/211129y3nc3banm3fnwzea.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.padding-box：

規定背景圖片是從padding開始繪製的，包括padding區域，座標原點在左上角。

程式碼例項如下：

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

在以上程式碼中，背景圖片是從padding區域開始繪製的，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/05/211423sjiu44szi3iib7s8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.content-box：

規定背景圖片從內容區域開始繪製（內容區域就是除border和padding之外的區域），座標原點在左上角。

程式碼例項如下：

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

以上程式碼的表現可以看出，背景圖片是從內容區域開始繪製的，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/05/211616cxz171xv4sm1jx3p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能有類似疑問，既然規定了從內容區域開始繪製，為什麼padding和border區域都有背景圖片顯示。

實質區別在於，可以繪製和開始繪製是兩個概念，參閱background-origin屬性和background-clip區別一章節。

相關文章