CSS背景圖大小改變的方法
在CSS中,我們可以使用background-size
屬性來(lái)改變背景圖的大小,這個(gè)屬性接受兩個(gè)值:寬度和高度,如果我們只提供一個(gè)值,那么另一個(gè)值會(huì)自動(dòng)縮放以保持原始圖像的寬高比。
如果我們想把背景圖的寬度改為500px,我們可以這樣寫:
div { background-image: url('image.jpg'); background-size: 500px; }
這樣,背景圖的寬度就會(huì)變?yōu)?00px,高度會(huì)自動(dòng)縮放以保持原始圖像的寬高比。
如果我們想要改變背景圖的大小,使得寬度和高度都變?yōu)樵瓉?lái)的兩倍,我們可以這樣寫:
div { background-image: url('image.jpg'); background-size: 200% 200%; }
這樣,背景圖的寬度和高度都會(huì)變?yōu)樵瓉?lái)的兩倍。
需要注意的是,background-size
屬性的值可以是像素(px)、百分比(%)或者em等單位,使用百分比或者em單位可以讓背景圖的大小隨著瀏覽器窗口或者父元素的大小變化而變化,從而實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。