background-position · CSS基础

## background-position属性 background-position属性设置背景图像的起始位置。 **注意**对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。 JavaScript 语法:object object.style.backgroundPosition="center" 语法 ~~~ background-position: horizontal vertical ~~~ 水平是 ~~~ percentage | length | left | center | right ~~~ 垂直是 ~~~ percentage | length | top | center | bottom ~~~ ## * * * 属性值 | 值 | 描述 | | :-- | :-- | | left top left center left bottom right top right center right bottom center top center center center bottom | 如果仅指定一个关键字，其他值将会是"center" | | *x% y%* | 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％ | | *xpos ypos* | 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他[CSS单位](https://www.w3cschool.cn/cssref/css-units.html)。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions | | inherit | 指定background-position属性设置应该从父元素继承 | ## 实例--如何定位background-image ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> body { background-image:url('/statics/images/course/smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style> </head> <body> <p><b>注意:</b> 该属性工作在 Firefox 和 Opera, background-attachment 属性会被设置为 "fixed".</p> </body> </html> ``` ##实例--[如何使用％来定位背景图像](https://www.w3cschool.cn/tryrun/showhtml/trycss_background-position_percent) ``` <!DOCTYPE html> <html> <head> <style> body { background-image: url('/statics/images/course/smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%; } </style> </head> <body> <p><b>Note:</b> For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".</p> </body> </html> ``` ## 实例--[如何使用像素来定位背景图像](https://www.w3cschool.cn/tryrun/showhtml/trycss_background-position_pixel) ``` <!DOCTYPE html> <html> <head> <style> body { background-image: url('/statics/images/course/smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 100px; } </style> </head> <body> <p><b>Note:</b> For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".</p> </body> </html> ```