CSS中,我們可以為背景圖片設置不平鋪的效果,讓背景圖片只顯示一次,而不是在整個區域內重復顯示。
.container { background-image: url('example.jpg'); background-repeat: no-repeat; background-size: cover; }
其中,background-repeat
屬性用于指定背景圖片是否要在水平方向和垂直方向上重復顯示,取值可以是repeat
(默認值,水平和垂直方向上重復顯示)、repeat-x
(水平方向上重復顯示)、repeat-y
(垂直方向上重復顯示)和no-repeat
(不重復顯示)。
而background-size
屬性用于指定背景圖片的尺寸,取值可以是長度值(如px、em等)或百分比值,還可以使用 cover(保持比例鋪滿整個區域,可能存在部分溢出)和 contain(保持比例鋪滿整個區域,整個圖片完整顯示,可能存在留白)。
在以上代碼中,我們通過將background-repeat
設為no-repeat
來禁止背景圖片重復顯示,并將background-size
設為cover
來使背景圖片的寬高比與容器相同,鋪滿整個容器。