欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-09 12:27:13
...

引言:

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

为了美观点,花多点时间吧,又是凌晨三点了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>


以上就是CSS+html如何实现背景图片的填充详解的详细内容,更多请关注其它相关文章!