**background-origin**
* 描述:设置或检索对象的背景图显示的原点
* 版本:CSS3 新增属性
* 继承性:无
**语法**
```
background-origin:背景图显示的原点
```
背景图显示的原点
* padding-box:从 padding 区域 (含 padding) 开始显示背景图像。
* border-box:从 border 区域 (含 border) 开始显示背景图像。
* content-box:从 content 区域开始显示背景图像。
**使用说明**
设置 background-position 属性显示背景图的起始原点。
如果背景图像的 background-attachment 属性为 fixed,则该属性没有效果。
**代码示例**
对背景图设置从内容分区域开始显示
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-origin</title>
<style>
#container{
width: 400px;
height: 400px;
border: 1px solid #ff6600;
background-image: url(../img/01.jpg);
background-repeat: no-repeat;
padding: 10px;
background-origin: content-box;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
```
![background-origin](https://box.kancloud.cn/4c8d51209b585ca6030affbd64f7dc68_443x433.png)
- 空白目录
- CSS3专业名词
- 复合属性
- 继承性
- CSS3背景
- background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-origin
- background-clip
- background-size
- CSS边框
- border
- border-width
- border-style
- border-color
- border-top
- border-top-width
- border-top-style
- border-top-color
- border-right
- border-right-width
- border-right-style
- border-right-color
- border-bottom
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left
- border-left-width
- border-left-style
- border-left-color
- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- CSS颜色
- color
- opacity
- CSS字体
- font
- font-style
- font-variant
- font-weight
- font-size
- font-family
- font-stretch
- font-size-adjust
- CSS定位
- position
- z-index
- clip