在開發網頁時,經常要通過設置背景圖來美化網頁的樣式,CSS提供了多種方式來實現這個目標。
其中,最基本的方式是使用background-image屬性來添加背景圖。其語法如下:
background-image:url('圖片地址');
其中,圖片地址需要填寫正確的圖片路徑。如果網頁中有多個元素需要添加背景圖,我們可以使用通配符*來選擇所有元素,如下:
* { background-image: url('圖片地址'); }
另外,我們還可以通過設置背景重復、位置等屬性來控制背景圖的展示效果。常用的屬性包括:
background-repeat: no-repeat; //不重復顯示圖片 background-position: center top; //背景圖居中顯示 background-size: cover; //自適應鋪滿整個容器
例如,我們想在網頁頂部添加一個背景圖,并且讓它居中顯示且不重復,可以這樣設置:
html, body { height: 100%; } header { background-image: url('圖片地址'); background-repeat: no-repeat; background-position: center top; height: 100%; }
這樣,我們就能成功添加一個美觀的背景圖了。