在CSS中,可以使用背景圖片來美化網頁,為網頁添加圖像元素。而要在CSS中添加背景圖片,需要使用background-image屬性,并為其賦值一個圖片的URL。
.example{ background-image: url('example.jpg'); }
除了使用絕對URL來引用背景圖片,我們還可以使用相對URL。相對URL是相對于當前頁面的路徑,如果我們的背景圖片與當前html文件在同一文件夾下,我們可以使用相對路徑來引用圖片。
.example{ background-image: url('../images/example.jpg'); }
有時候,背景圖片并不能完全填充背景,或者不能適應響應式布局,還需要進行調整。為了解決這個問題,我們可以使用background-size屬性。
.example{ background-image: url('example.jpg'); background-size: cover; }
其中,cover的值表示將圖片縮放以適應背景區域,如果需要保持圖片原始比例,可以使用contain的值。
在一些特定情況下,可能需要平鋪多個背景圖片,此時可以使用background-repeat屬性。
.example{ background-image: url('example1.jpg'),url('example2.jpg'); background-repeat: repeat-x,repeat-y; }
以上代碼表示,在example1.jpg沿x軸平鋪,在example2.jpg沿y軸平鋪。