定义
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注意：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。
语法
background-origin: padding-box|border-box|content-box;
属性值
| 值 | 说明 |
| padding-box | 背景图像相对于内边距框来定位。 |
| border-box | 背景图像相对于边框盒来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
实例
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<h1>background-origin:border-box:</h1>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet dignissimos dolores ducimus magni mollitia nostrum quidem quo temporibus vel. Earum ex excepturi nobis tempore. Consequatur nulla optio quae quos.
</div>
<br>
<br>
<h1>background-origin:content-box:</h1>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto at consequuntur dicta esse laboriosam mollitia obcaecati provident quidem quo? Asperiores blanditiis dolores dolorum eligendi hic impedit inventore officia, optio.
</div>
</body>
</html>
background-origin:border-box:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet dignissimos dolores ducimus magni mollitia nostrum quidem quo temporibus vel. Earum ex excepturi nobis tempore. Consequatur nulla optio quae quos.
background-origin:content-box:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto at consequuntur dicta esse laboriosam mollitia obcaecati provident quidem quo? Asperiores blanditiis dolores dolorum eligendi hic impedit inventore officia, optio.
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| Safari | Chrome | FireFox | IE |
| 5.0 | 5.0 | 5.0 | 9.0 |