CSS中的background-image可以讓我們?cè)诰W(wǎng)頁中添加背景圖片。通過設(shè)置background-position屬性,我們可以控制圖片的位置。在默認(rèn)情況下,圖片會(huì)從左上角開始顯示。
如果我們希望圖片從左往右顯示,可以將background-position設(shè)置為“l(fā)eft center”,其中l(wèi)eft表示圖片靠左對(duì)齊,center表示圖片在垂直方向上居中顯示。下面是一段示例代碼:
body { background-image: url('bg.jpg'); background-position: left center; }
這段代碼會(huì)將bg.jpg這張圖片從左往右顯示在網(wǎng)頁中。
如果我們希望圖片從右往左顯示,可以將background-position設(shè)置為“right center”。如果希望圖片從中間開始顯示,可以將background-position設(shè)置為“center center”。
除此之外,我們還可以通過background-size屬性來控制圖片的大小。如果希望圖片充滿整個(gè)網(wǎng)頁,可以將background-size設(shè)置為“cover”。如果希望圖片完整顯示,可以將background-size設(shè)置為“contain”。
綜上所述,通過設(shè)置background-position和background-size屬性,我們可以實(shí)現(xiàn)多種不同的背景圖片效果。