CSS+html如何实现背景图片的填充详解

引言：

今天想写个人的欢迎界面，又折腾起了前端，然而真的捉急呀

为了美观点，花多点时间吧，又是凌晨三点了0.0

CSS实现单张背景图片的填充

实现方式一：

直接使用body元素的background-image属性，多个浏览器兼容，基本满足要求

添加background-color: #22C3AA;在加载图片前显示颜色

BUG：页面太小时下方会留有空隙

详细属性w3school里面的background属性

<span>nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
    
    
<meta>    
<title>hello world</title>    

<style>
body {
	margin: 0;
	background-image: url(&#39;bg.jpg&#39;);  
	background-repeat:no-repeat;
        background-position:0% 0%;
  	background-size:cover;
	background-color: #22C3AA;
}
</style>    

    
 </span>

实现方式二：

使用p，图片能自适应浏览器的大小，不会出现body的bug

BUG：IE11不兼容，下方会有一个绿线(body背景颜色)，十分不美观

参见：HTML中使背景图片自适应浏览器大小

<span>nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
    
    
<meta>    
<title>hello world</title>    

<style>
body {
	margin: 0;	
	background-color: #22C3AA;
}
</style>    

<!--
<p id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" >    
@@##@@    
</p>
-->
    
 </span>

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！