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> ```