我們在編輯網(wǎng)頁時,如果覺得網(wǎng)頁過于單調(diào),這時便可以加上一張自己喜歡的背景圖。這篇文章中,W3Cschool 小編給大家介紹下 HTML 中如何設置背景圖片,分別有哪幾種設置背景圖片的方法。
方法一、HTML中設置背景圖片
HTML中的<body></body>標簽內(nèi)可直接設置背景圖片。具體代碼如下:
<body background="圖片路徑">
效果展示:
直接用<body></body>設置背景圖片的話,瀏覽器會根據(jù)你圖片的大小,鋪滿整個屏幕。若不想平鋪圖片,還需要進行另外的 CSS 設置。此方法較為麻煩。
方法二:CSS 設置背景圖片
CSS 設置背景圖片的方式與 HTML 設置背景圖片的方式大體一致,具體代碼如下:
<style type="text/css">
body{
background: url("圖片地址");
}
</style>
到目前為止,圖片還是會重復鋪滿整個屏幕。
我們需要在進行添加 CSS 樣式進行優(yōu)化。
<style type="text/css">
body{
background: url("圖片地址") no-repeat center center fixed;
/*兼容瀏覽器版本*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
最終效果如下:
以上就是 W3Cschool 小編整理的 HTML 如何設置背景圖片以及方法介紹。