css中,可利用“background-position”屬性讓背景圖居中顯示,該屬性用于設置背景圖的起始位置,當屬性的值為“center”時,背景圖會水平垂直居中顯示,語法“元素{background-position:center}”。
本教程操作環(huán)境:windows10系統(tǒng)、css3&&html5版、dell g3電腦。
css如何將背景圖居中
在css中,通過background-position屬性可設置背景圖片的位置。下面舉例講解css中如何讓背景圖片居中顯示。
示例如下:
1、新建一個html文件,命名為test.html,用于講解css中如何讓背景圖片居中顯示。使用div標簽創(chuàng)建一個模塊,用于測試。設置div標簽的class屬性為test,用于下面樣式的設置。
在css標簽內(nèi),通過class設置div的樣式 ,定義其寬度為300px,高度為300px,邊框為1px的灰色邊框。
2、在css標簽內(nèi),再通過background屬性,設置div的背景圖片為1.jpg,并使用background-position屬性設置背景圖片居中(center)顯示。
在瀏覽器打開test.html文件,查看實現(xiàn)的效果。
總結(jié):
1、使用div標簽創(chuàng)建一個模塊,設置div標簽的class屬性為test,用于下面樣式的設置。
2、在css標簽內(nèi),通過class設置div的樣式 ,定義其寬度為300px,高度為300px,邊框為1px的灰色邊框。
3、在css標簽內(nèi),再通過background屬性,設置div的背景圖片為1.jpg,并使用background-position屬性設置背景圖片居中(center)顯示。
(學習視頻分享:css視頻教程)