background-origin用來決定background-position的參考原點，即背景圖片定位的起點。取值有content-box,padding-box,padding-box三種。

content-box:背景影象相對於內容框來定位：

.padding-box{     width: 314px;     height: 500px;     border: 1px solid rgba(0,0,0,.5);     background: orange url(img/k.jpg) no-repeat left top;     padding: 20px;     margin: 30px;     background-origin: content-box;     -webkit-background-origin:content-box;     -moz-background-origin: content-box;     -o-background-origin: content-box;     -ms-background-origin: content-box; }

padding-box:背景影象相對於內邊距來定位：

.padding-box{     width: 314px;     height: 500px;     border: 1px solid rgba(0,0,0,.5);     background: orange url(img/k.jpg) no-repeat left top;     padding: 20px;     margin: 30px;     background-origin: padding-box;     -webkit-background-origin:padding-box;     -moz-background-origin: padding-box;     -o-background-origin: padding-box;     -ms-background-origin: padding-box; }

border-box背景影象相對於邊框來定位：

.padding-box{     width: 314px;     height: 500px;     border: 1px solid rgba(0,0,0,.5);     background: orange url(img/k.jpg) no-repeat left top;     padding: 20px;     margin: 30px;     background-origin: border-box;     -webkit-background-origin:border-box;     -moz-background-origin: border-box;     -o-background-origin: border-box;     -ms-background-origin: border-box; }

當屬性值為border-box時影象是最往左的。