App下載

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

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

我們?cè)诰庉嬀W(wǎng)頁(yè)時(shí),如果覺(jué)得網(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è)置背景圖片以及方法介紹。

1 人點(diǎn)贊