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