在網(wǎng)站設(shè)計中,大量使用了背景圖片來美化頁面,如何讓背景圖片在不同的屏幕尺寸下都呈現(xiàn)良好的展示效果就顯得尤為重要了。而定義背景圖片底部的屬性就是其中之一。
background-position: center bottom;
上述代碼中,我們使用了background-position屬性來定義背景圖片的位置,其中center表示圖片在水平方向上居中顯示,bottom則表示圖片在垂直方向上貼著底部顯示。
若希望圖片從底部開始鋪滿整個頁面,則可以使用以下代碼:
background-size: cover; background-repeat: no-repeat; background-position: center bottom;
上述代碼中,background-size: cover;表示讓圖片自動縮放到與容器大小相匹配,background-repeat: no-repeat;則表示不讓圖片在容器內(nèi)重復(fù)。最后一行代碼同樣是定義圖片底部貼著底部顯示。
在移動端設(shè)計中,同樣可以使用這些屬性來定義圖片位置。根據(jù)具體頁面布局和需求選擇不同的值來呈現(xiàn)良好的展示效果。