溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關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中怎么為元素設置背景圖像有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
