App下載

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

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

我們?cè)诰庉嬀W(wǎng)頁(yè)時(shí)，如果覺得網(wǎng)頁(yè)過(guò)于單調(diào)，這時(shí)便可以加上一張自己喜歡的背景圖。這篇文章中，W3Cschool 小編給大家介紹下 HTML 中如何設(shè)置背景圖片，分別有哪幾種設(shè)置背景圖片的方法。

方法一、HTML中設(shè)置背景圖片

HTML中的<body></body>標(biāo)簽內(nèi)可直接設(shè)置背景圖片。具體代碼如下：

<body background="圖片路徑">

效果展示：

backgroundimage

直接用<body></body>設(shè)置背景圖片的話，瀏覽器會(huì)根據(jù)你圖片的大小，鋪滿整個(gè)屏幕。若不想平鋪圖片，還需要進(jìn)行另外的 CSS 設(shè)置。此方法較為麻煩。

方法二：CSS 設(shè)置背景圖片

CSS 設(shè)置背景圖片的方式與 HTML 設(shè)置背景圖片的方式大體一致，具體代碼如下：

<style type="text/css">
    body{
	    background: url("圖片地址");             
	}
</style>

到目前為止，圖片還是會(huì)重復(fù)鋪滿整個(gè)屏幕。

我們需要在進(jìn)行添加 CSS 樣式進(jìn)行優(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 如何設(shè)置背景圖片以及方法介紹。

HTML CSS 前端

1 人點(diǎn)贊