如何让HTML页面中的背景图片自适应浏览器高度和宽度（电脑高度和宽度）
程序员文章站
2022-05-24 07:50:26
...
如何让HTML页面中的背景图片自适应浏览器高度和宽度（电脑高度和宽度）
在今天做项目的时候突然遇到一个问题，我给一个页面加一个背景图片，直接放进去被拉大了，如图所示：
虽然我可以用PS做成我自己的电脑宽度，但是我换一台别人的电脑（分辨率不一样）显示的图片大小完全不一样。
如何解决这个问题呢？
我首先是写css样式，在百度 查阅css3文档，使用background-size: cover;即可，我接着就试了一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background: url(1.jpg);
}
</style>
</head>
<body>
</body>
</html>结果显示的是：
这样的话最新浏览器显示没啥问题，但是有的图片高度不会撑满全部，最终解决方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background: url(1.jpg) no-repeat center center fixed;
/*兼容浏览器版本*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>这样就完美实现了。无论是换一台不同分辨率的电脑还是调整浏览器比例，背景图片的大小永远都不会改变了。
i
上一篇： shell学习笔记
下一篇： 用分治法实现二叉查找