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)