这篇文章主要介绍了CSS如何设置背景图片自适应全屏的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS如何设置背景图片自适应全屏文章都会有所收获，下面我们一起来看看吧。

源码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>CSS设置背景图片自适应-亿速云(yisu.com)</title><styletype="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:center0;}</style></head><body></body></html>实现原理：

首先固定背景图片在屏幕的最上方和最左方。其次将 height 和 width 的值都设置为 100%，还需要设置 min-width，这是为了实现屏幕宽度在 1000px 以内时保持图片大小不变。最后还需要设置背景图片不重复（no-repeat）。

关于“CSS如何设置背景图片自适应全屏”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS如何设置背景图片自适应全屏”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。