background-origin · 跟老司机学CSS3

**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)