App下載

HTML如何設置背景圖片？有幾種設置背景圖片的辦法？

猿友 2021-03-11 09:47:09 瀏覽數 (70403)
反饋

我們在編輯網頁時，如果覺得網頁過于單調，這時便可以加上一張自己喜歡的背景圖。這篇文章中，W3Cschool 小編給大家介紹下 HTML 中如何設置背景圖片，分別有哪幾種設置背景圖片的方法。

方法一、HTML中設置背景圖片

HTML中的<body></body>標簽內可直接設置背景圖片。具體代碼如下：

<body background="圖片路徑">

效果展示：

backgroundimage

直接用<body></body>設置背景圖片的話，瀏覽器會根據你圖片的大小，鋪滿整個屏幕。若不想平鋪圖片，還需要進行另外的 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>

最終效果如下：

bgimg

以上就是 W3Cschool 小編整理的 HTML 如何設置背景圖片以及方法介紹。

HTML CSS 前端

1 人點贊