CSS 可以使用 background-position 屬性來設(shè)置背景圖的位置,包括水平和垂直方向。可以使用像素值、百分比、關(guān)鍵字等方式來指定位置。
如果要將背景圖局右,需要將位置屬性設(shè)置成 right,同時可以通過 background-position-x 屬性來指定水平位置。代碼如下所示:
background-position: right; background-position-x: 50%; /* 設(shè)置水平位置為中心 */
其中,background-position 屬性簡寫了 background-position-x 和 background-position-y 屬性。設(shè)置水平位置為 50% 就可以使背景圖在水平方向上居中。
如果要將背景圖局右下角,可以這樣寫:
background-position: right bottom; background-position-x: 100%; /* 設(shè)置水平位置為最右 */ background-position-y: 100%; /* 設(shè)置垂直位置為最底 */
可以發(fā)現(xiàn),這里將水平位置設(shè)置成了 100%,表示最右側(cè),將垂直位置也設(shè)置成了 100%,表示最底部,從而實現(xiàn)了局右下角的效果。
需要注意的是,如果背景圖尺寸比容器尺寸小,那么默認(rèn)會在容器中居中顯示。如果要將背景圖設(shè)置成與容器一樣大小,可以使用 background-size 屬性。