溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關html設置背景圖片全屏的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
html設置背景圖片全屏的方法：首先新建一個html文檔；然后把背景圖片設置在同一個文件夾里；接著添加style標簽；最后通過“background-image”以及“background-repeat”屬性實現(xiàn)背景圖片全屏的設置即可。
html設置背景圖片全屏的方法：
1.新建一個html文檔。
設置一下HTML的框架，然后把圖片設置在同一個文件夾里面。
2.加入<style type="text/css"></style>，這樣可以有樣式設置。
因為背景設置在主體，所以還要定義為body{}。
background-image:url(圖片)，這個是添加圖片的意思。
3.然后我們需要加入background-repeat:repeat-x;這個時候就會橫向平鋪。
background-repeat:no-repeat;這樣就可以不重復平鋪。 background-repeat:repeat-y;這個指令是縱向平鋪。 background-repeat:repeat;這樣則是全屏平鋪。
完整的實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html設置背景圖片全屏</title>
<style type="text/css">
body{
background-image: url(1.jpg);
/*background-repeat屬性定義了圖像的平鋪模式*/
/* background-repeat: repeat; */
/*默認值，背景圖像將在垂直方向和水平方向重復,即全屏平鋪*/
background-repeat: no-repeat;
/*這個時候就會不重復平鋪*/
background-repeat: repeat-y;
/*背景圖像將在垂直方向重復。*/
background-repeat: repeat-x;
/*背景圖像將在水平方向重復。*/
/* background-size:100%; */
/* 指定背景圖片大小 */
background-attachment: fixed;
/* 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 */
}
</style>
</head>
<body>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
<p>背景圖片！</p><p>背景圖片！</p>
</body>
</html>感謝各位的閱讀！關于“html設置背景圖片全屏的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
