这篇文章主要介绍了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如何设置背景图片自适应全屏”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
