background-position · 跟老司機學CSS3

**background-position** * 描述：設置或檢索對象的背景圖位置 * 版本：CSS1 | CSS3 該屬性在 CSS3 有修改 * 繼承性：無 **語法** ``` background-position:定位點; ``` 定位點 * 百分比定位：第一個值是水平位置，第二個值是垂直位置。默認值：0% 0%，左上角是 0% 0%。右下角是 100% 100%。 * 關鍵詞定位：top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right * CSS單位定位：第一個值是水平位置，第二個值是垂直位置。左上角是 (0px 0px) 或任何其他的 CSS 單位。 **使用說明** 設置對象的背景圖位置，必須先指定 background-image 屬性。如果只提供一個，該值將用于橫坐標，縱坐標將默認為 50% 。如果提供兩個，第一個用于橫坐標，第二個用于縱坐標。在 CSS3 中允許提供三個或四個值。如果提供三或四個，在通過百分比定位或CSS單位定位偏移前面都必須跟著一個邊界關鍵字 left | right | top | bottom，偏移量相對關鍵字位置進行偏移。 **代碼示例** 將背景圖定位在右下角，距有邊框 10 像素，底邊框 20 像素。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-position</title> <style> #container{ width: 400px; height: 400px; border: 1px solid #ff6600; background-image: url(../img/01.jpg); background-repeat: no-repeat; background-position: right 10px bottom 20px; } </style> </head> <body> <div id="container"> </div> </body> </html> ``` ![background-position](https://box.kancloud.cn/b07a8fccf942a4ab4cb3c6a77226468a_425x417.png)