CSS+html如何实现背景图片的填充详解
程序员文章站
2022-04-18 12:22:46
...
引言：
今天想写个人的欢迎界面，又折腾起了前端，然而真的捉急呀
为了美观点，花多点时间吧，又是凌晨三点了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如何实现背景图片的填充详解的详细内容，更多请关注其它相关文章！