在CSS3中，我們可以使用background-origin屬性來設置元素背景圖片平鋪的最開始位置。
語法：
background-origin:屬性值;
說明：
background-origin屬性取值如下：
邊框、內邊距、內容區域這些是CSS盒子模型的內容。在CSS盒子模型中，我們都知道“任何元素都可以看做一個盒子”。學習了CSS中的background-image屬性時，我們知道背景圖片都是從內邊距開始平鋪的，有了background-origin屬性，我們可以控制背景圖片平鋪的開始位置是否為邊框、內邊距或內容區域。
以下例子將以下面這張圖片作為背景圖片：
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 background-origin屬性</title>
<style type="text/css">
body
{
font-family:微軟雅黑;
font-size:14px;
}
#view
{
display:inline-block;
width:400px;
padding:15px;
font-size:15px;
border:15px dashed #F1F1F1;
background-image:url("../App_images/lesson/run_css3/mingren.png");
background-origin:border-box;
background-repeat:no-repeat;
}
</style>
<script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#ckb1").click(function () {
$("#view").css("background-origin", "border-box");
});
$("#ckb2").click(function () {
$("#view").css("background-origin", "padding-box");
});
$("#ckb3").click(function () {
$("#view").css("background-origin", "content-box");
});
})
</script>
</head>
<body>
<div id="select">
background-origin：
<input id="ckb1" name="group" type="radio" value="border-box" checked="checked"/><label for="ckb1">border-box</label>
<input id="ckb2" name="group" type="radio" value="padding-box"/><label for="ckb2">padding-box</label>
<input id="ckb3" name="group" type="radio" value="content-box"/><label for="ckb3">content-box</label>
</div>
<div id="view">
學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網。
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
注意：此例子請在火狐浏覽器下測試，否則無法查看js效果。
這裡我做了一個小小的程序，大家可以動態觀察到當background-origin屬性選擇不同值時的實際效果。
其實，background-origin屬性的本質是規定background-position屬性相對於什麼位置來定位。上述例子由於沒有指定background-position屬性值，因此浏覽器默認采用“background-position:top left;”。因此不管background-origin屬性值如何變化，背景圖片都是從“左上”開始平鋪。
bakcground-position:left;
當我們為#view的div元素添加如上代碼時，不管background-origin屬性值如何變化，背景圖片都是從“左邊”開始平鋪。大家請在“在線測試”中自行測試，查看實際效果，然後對比理解一下。
因此，從這一點我們可以總結：background-origin屬性往往都是配合background-position屬性來使用，其中background-origin屬性規定background-position屬性相對於什麼位置來定位。