溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“html如何設置div背景圖片”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html如何設置div背景圖片”吧!
html設置div背景圖片的方法：1、使用div元素的style屬性，語法為“<div style="background:url(圖片名稱);">”；2、給div元素添加“{background-image:url(圖片名稱);}”樣式。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
html設置div背景圖片的方法
1、html在div中添加背景圖片語法如下：
<div style="width:寬度值; height:高度值; background:url(圖片名稱.jpg);"></div>
圖片和網頁放一個文件夾里面，注意圖片后綴，這里是.jpg就只適合JPG圖片的，其他類型圖片自行改后綴。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div style="width: 200px;height: 100px;background: url(1115.08.png);"></div> </body> </html>
輸出結果：
2、可以通過給div元素添加“{background-image:url(圖片名稱);}”樣式來設置背景圖片，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.ellipse{
width: 400px;
height: 200px;
background-image: url(1115.08.png);
}
</style>
</head>
<body>
<div class="ellipse"></div>
</body>
</html>輸出結果：
到此，相信大家對“html如何設置div背景圖片”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
