CSS中設置圖片是網頁開發過程中常常涉及的一個功能,通過CSS的背景圖片(background-image)屬性可以使網頁更加美觀。該屬性可以讓開發者將圖片嵌入到HTML元素的背景當中。
/*將圖片設置為背景*/ element{ background-image: url('image.jpg'); background-size: cover; background-repeat: no-repeat; }
如上代碼所示,將圖片作為元素的背景,需要在CSS中使用background-image屬性,后面加上URL將需要設置的圖片的路徑放到URL的括號中。
background-size屬性是可選的,用于設置背景圖片元素的尺寸,如上代碼中,cover表示讓背景圖片充滿整個元素,不會出現空白或是被拉伸的情況。
background-repeat屬性是可選的,用于設置背景圖片是否重復,no-repeat值表示背景圖片不重復。
如果想要在多個元素上使用相同的背景圖片可以使用CSS中的CSS選擇器,如下代碼所示:
/*將相同的圖片設置到不同的元素上*/ .element1, .element2, .element3{ background-image: url('image.jpg'); background-size: cover; background-repeat: no-repeat; }
如上代碼所示,我們可以在一個類選擇器中同時設置不同的元素,這里使用了逗號將不同的元素分隔出來,這樣就可以將相同的背景圖片設置到不同的元素上。
總之,通過CSS中的背景圖片屬性,我們可以很方便的美化網站,增加用戶體驗。