4.2 CSS3 背景原點屬性
4.2.1 background-origin 屬性的語法及參數
background-origin屬性主要就是用來決定 background-position屬性的參考原點，即決定背景圖片定位的起點。在默認情況下，背景圖片的background-position屬性總是以元素左上角的坐標原點對背景圖片進行背景定位。CSS3的background-origin屬性將打破這一格局，可以根據自己的需要來改變背景圖片的background-position起始位置。
語法：
background-origin: padding || border || content //早期語法
background-origin: padding-box || border-box || content-box //新語法
IE9+ / firefox4+ / chrome4+ / safari3+ / opera10.5+ 均支持新的語法
取值說明：
1、padding-box(padding):此值為background-origin的默認值，決定background-position起始位置從padding的外邊緣（border的內邊緣）開始顯示背景圖片；
2、border-box(border):此值決定background-position起始位置從border的外邊緣開始顯示背景圖片；
3、content-box(content):此值決定background-position起始位置從content的外邊緣（padding的內邊緣）開始顯示背景圖片；
有一點需要提出，在ＩＥ8以下版本解析是不一樣的，在IE7以下版本background-origin默認是從border開始顯示背景圖片。
4.2.2 background-origin屬性使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-origin 使用方法</title>
<style>
div{
width: 300px;
height: 200px;
border: 20px dashed rgba(0, 0, 0, 0.3);
background: orange url(http://7xr9pe.com1.z0.glb.clouddn.com/logo100.jpg) no-repeat left top;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div class="padding-box"></div>
</body>
</html>
1、padding-box
.padding-box{
background-origin: padding-box;
}
padding-box 效果
2、border-box
.border-box{
background-origin: border-box;
}
border-box 效果
3、content-box
.content-box{
background-origin: content-box;
}
content-box 效果
4.2.3 瀏覽器兼容性
background-origin 瀏覽器兼容性
