上一篇文章中我們了解了規定背景繪製區域的方法，請看《巧用css規定背景繪製區域》。這次我們來了解一下為元素設定背景圖像的方法，有需要的可以參考。
當我們想用圖片作為元素的背景時，我們該怎麼去做呢？
讓我們來看一個小例子吧。
<!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>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>
</html>這個小例子的結果是
#可以看到，我們喜歡的圖片就變成元素的背景啦。這是因為我們使用了background-image這個屬性。
我們來看看這個屬性吧。
background-image 屬性為元素設定背景圖像。元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。預設地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。
溫馨提示：
請設定一種可用的背景顏色，這樣的話，如果背景圖片不可用，頁面也可獲得良好的視覺效果。
在繪製時，影像以 z 方向堆疊的方式進行。先指定的圖像會在之後指定的圖像上面繪製。因此指定的第一個圖像“最接近用戶”。
然後元素的邊框 border 會在它們之上被繪製，而 background-color 則會在它們之下繪製。影像的繪製與盒子以及盒子的邊框的關係，需要在CSS屬性background-clip 和 background-origin 中定義。
如果一個指定的圖像無法被繪製 (例如，被指定的 URI 所表示的檔案無法被載入)，瀏覽器會將此情況等同於其值被設為 none。
推薦學習：css影片教學
#以上是css如何為元素設定背景影像的詳細內容。更多資訊請關注PHP中文網其他相關文章！
