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

2024-02-15 00:20| 来源: 网络整理| 查看: 265

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

实现效果：

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

源码： CSS设置背景图片自适应 - 编程狮(w3cschool.cn) 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; } 实现原理：

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

以上就是文章“CSS 怎么设置背景图片自适应全屏？附源码！”的全部内容。想要了解更多 CSS 资料请关注 w3cschool。

【本文地址】

公司简介

联系我们