CSS+html如何實現背景圖片的填充詳解

來源：懂視網責編：小采時間：2020-11-27 18:50:27

CSS+html如何實現背景圖片的填充詳解

CSS+html如何實現背景圖片的填充詳解:引言：今天想寫個人的歡迎界面，又折騰起了前端，然而真的捉急呀為了美觀點，花多點時間吧，又是凌晨三點了0.0CSS實現單張背景圖片的填充實現方式一：直接使用body元素的background-image屬性，多個瀏覽器兼容，基本滿足要求添加background-col

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS+html如何實現背景圖片的填充詳解:引言：今天想寫個人的歡迎界面，又折騰起了前端，然而真的捉急呀為了美觀點，花多點時間吧，又是凌晨三點了0.0CSS實現單張背景圖片的填充實現方式一：直接使用body元素的background-image屬性，多個瀏覽器兼容，基本滿足要求添加background-col

引言：

今天想寫個人的歡迎界面，又折騰起了前端，然而真的捉急呀

為了美觀點，花多點時間吧，又是凌晨三點了0.0

CSS實現單張背景圖片的填充

實現方式一：

直接使用body元素的background-image屬性，多個瀏覽器兼容，基本滿足要求

添加background-color: #22C3AA;在加載圖片前顯示顏色

BUG：頁面太小時下方會留有空隙

詳細屬性w3school里面的background屬性

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>hello world</title> 

<style type="text/css">
body {
	margin: 0;
	background-image: url('bg.jpg'); 
	background-repeat:no-repeat;
 background-position:0% 0%;
 	background-size:cover;
	background-color: #22C3AA;
}
</style>

</head> 
<body>
</body> 
</html> </span>

實現方式二：

使用p，圖片能自適應瀏覽器的大小，不會出現body的bug

BUG：IE11不兼容，下方會有一個綠線(body背景顏色)，十分不美觀

參見：HTML中使背景圖片自適應瀏覽器大小

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>hello world</title> 

<style type="text/css">
body {
	margin: 0;	
	background-color: #22C3AA;
}
</style>

</head> 
<body>
<!--
<p id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" > 
<img src="3-bg.jpg" height="100%" width="100%"/> 
</p>
-->
</body> 
</html> </span>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com