站長(zhǎng)資訊網(wǎng)上一篇文章中我們了解了規(guī)定背景繪制區(qū)域的方法，請(qǐng)看《巧用css規(guī)定背景繪制區(qū)域》。這次我們來(lái)了解一下為元素設(shè)置背景圖像的方法，有需要的可以參考參考。
當(dāng)我們想用圖片作為元素的背景時(shí)，應(yīng)該怎么去做呢？
讓我們來(lái)看一個(gè)小例子吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background-image: url("images/2.jpg"); background-repeat:no-repeat; } </style> </head> <body> <div>為了顯示，表明這個(gè)一個(gè)div元素</div> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <div>為了顯示，表明這個(gè)一個(gè)div元素</div> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <div>為了顯示，表明這個(gè)一個(gè)div元素</div> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <div>為了顯示，表明這個(gè)一個(gè)div元素</div> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <div>為了顯示，表明這個(gè)一個(gè)div元素</div> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> <div>為了顯示，表明這個(gè)一個(gè)div元素</div> <p>為了顯示，表明這個(gè)一個(gè)p元素</p> </body> </html>
這個(gè)小例子的結(jié)果是
可以看到，我們喜歡的圖片就變成元素的背景啦。這是因?yàn)槲覀兪褂昧?code>background-image這個(gè)屬性。
我們來(lái)看看這個(gè)屬性吧。
background-image 屬性為元素設(shè)置背景圖像。元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距。默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。
溫馨提示：
請(qǐng)?jiān)O(shè)置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁(yè)面也可獲得良好的視覺(jué)效果。
在繪制時(shí)，圖像以 z 方向堆疊的方式進(jìn)行。先指定的圖像會(huì)在之后指定的圖像上面繪制。因此指定的第一個(gè)圖像“最接近用戶”。
然后元素的邊框 border 會(huì)在它們之上被繪制，而 background-color 會(huì)在它們之下繪制。圖像的繪制與盒子以及盒子的邊框的關(guān)系，需要在CSS屬性background-clip 和 background-origin 中定義。
如果一個(gè)指定的圖像無(wú)法被繪制 (比如，被指定的 URI 所表示的文件無(wú)法被加載)，瀏覽器會(huì)將此情況等同于其值被設(shè)為 none。
推薦學(xué)習(xí)：css視頻教程
