CSS中,我們可以使用background-image
屬性將圖片放入背景中,為了讓圖片在背景中居中顯示,我們可以使用background-position
屬性,下面是一個簡單的示例:
body { background-image: url('image.jpg'); background-position: center; }
在這個示例中,url('image.jpg')
指定了圖片的路徑,center
表示圖片將在背景中居中顯示,你可以將image.jpg
替換為你想要顯示的圖片路徑。
如果你想要圖片在背景中重復(fù)顯示,可以使用background-repeat
屬性,如果你想要圖片在背景中橫向重復(fù)顯示,可以寫成:
body { background-image: url('image.jpg'); background-position: center; background-repeat: repeat-x; }
在這個示例中,repeat-x
表示圖片將在背景中橫向重復(fù)顯示,如果你想要圖片在背景中縱向重復(fù)顯示,可以寫成repeat-y
,如果你想要圖片在背景中水平和垂直方向都重復(fù)顯示,可以寫成repeat
。
需要注意的是,如果圖片在背景中重復(fù)顯示,那么background-position
屬性將決定重復(fù)顯示的起始位置,如果你想要圖片從中心開始重復(fù)顯示,那么可以將background-position
屬性設(shè)置為center
,如果你想要圖片從左邊開始重復(fù)顯示,那么可以將background-position
屬性設(shè)置為left
,如果你想要圖片從右邊開始重復(fù)顯示,那么可以將background-position
屬性設(shè)置為right
,如果你想要圖片從頂部開始重復(fù)顯示,那么可以將background-position
屬性設(shè)置為top
,如果你想要圖片從底部開始重復(fù)顯示,那么可以將background-position
屬性設(shè)置為bottom
。