App下載

在html網(wǎng)頁中如何設置背景圖片?網(wǎng)頁背景怎么設置?

猿友 2021-05-28 12:15:45 瀏覽數(shù) (42551)
反饋

不知道大家有沒有發(fā)現(xiàn),當我們在瀏覽部分網(wǎng)頁的時候網(wǎng)頁的背景都是很漂亮的。那么今天小編來教大家怎么在 html 網(wǎng)頁中設置背景圖片吧!

1.首先還是老樣子,我們在開發(fā)工具中新建一個 .html 文件,然后再文件中自己定義自己喜歡的內(nèi)容,代碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>網(wǎng)頁背景設置</title>
	</head>
	<body  >
		<h1>網(wǎng)頁背景怎么設置</h1>
		<h2>網(wǎng)頁背景怎么設置</h2>
		<h3>網(wǎng)頁背景怎么設置</h3>
		<h4>網(wǎng)頁背景怎么設置</h4>
		<h5>網(wǎng)頁背景怎么設置</h5>
	</body>
</html>

截圖

2.當我們完成第一之后,我們可以在內(nèi)容中添加一下樣式,首先我們在?body?標簽后面加上?background="圖片名字"?即可插入圖片,我們在頭部下面在添加一個?background-size? 來設置背景大小,在我們平常中我們還可以通過 ?repeat ?來設置圖片的放置效果,代碼和結果截圖如下:

<html>
	<head>
		<meta charset="utf-8">
		<title>網(wǎng)頁背景設置</title>
		<style>
			body{
				background-size: 100% ;
			}
		</style>
	</head>
	<body background="img/bg.jpg" >
		<h1>網(wǎng)頁背景怎么設置</h1>
		<h2>網(wǎng)頁背景怎么設置</h2>
		<h3>網(wǎng)頁背景怎么設置</h3>
		<h4>網(wǎng)頁背景怎么設置</h4>
		<h5>網(wǎng)頁背景怎么設置</h5>
	</body>
</html>

完成背景

這樣我們就完成了一個網(wǎng)頁的背景設置,當然我們還可以通過其他的方式來設置網(wǎng)頁的背景,今天有關于怎么在html網(wǎng)頁中如何設置背景圖片的問題就到這邊了咯!有更多的有關于前端設置的知識我們都可以在w3cschool中進行一個全面的學習。

1 人點贊