在網頁中,我們經常會遇到需要把一張背景圖片平鋪到整個頁面頂部的情況,這時候我們就可以利用 CSS 的 background 屬性來實現。
首先,在head
標簽中我們需要指定這張背景圖片:
上面的代碼中,我們首先指定了背景圖片的路徑,然后設置了平鋪方式為水平平鋪(repeat-x),最后指定了圖片的位置為頂部左側。此外,我們還去掉了 body 元素的 margin 和 padding,以保證背景圖片完整地顯示出來。
接下來,我們需要將頁面內容放在一個容器中,并給容器加上 padding,以保證內容不會被背景圖片所覆蓋:
這里是頁面內容...
最后,我們再給頁面中的所有元素(包括文本、鏈接等)添加一個白色背景色,以保證文字清晰可讀:
至此,我們就完成了網頁頂部背景圖片的平鋪效果。