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)