CSS怎么设置背景图片自适应全屏？附源码！

猿友 2021-05-19 12:02:22 浏览数 (9615)

反馈

不少同学在设置网站背景图片时会遇到这么一个问题：背景图片总是不能铺满整个屏幕，不是图片太小就是图片被过度放大，显得不太美观。那么 CSS 怎么设置背景图片自适应全屏呢？这篇文章告诉你。

实现效果：

CSS设置背景图片自适应全屏

源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS设置背景图片自适应 - 编程狮(w3cschool.cn)</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 资料请关注 w3cschool。