这篇文章主要介绍了CSS如何设置背景图片自适应全屏的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS如何设置背景图片自适应全屏文章都会有所收获，下面我们一起来看看吧。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS设置背景图片自适应 - 云搜网(yisu.com)</title>
<style type="text/css">
body{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
background: url(./image/img1.png);/*图片路径*/
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>
<body>
</body>
</html>
实现原理：
首先固定背景图片在屏幕的最上方和最左方。其次将 height 和 width 的值都设置为 100%，还需要设置 min-width，这是为了实现屏幕宽度在 1000px 以内时保持图片大小不变。最后还需要设置背景图片不重复（no-repeat）。
关于“CSS如何设置背景图片自适应全屏”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS如何设置背景图片自适应全屏”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云搜网行业资讯频道。
