4种CSS实现全屏背景图片铺满自适应的方式，最后一种尤其简单

原创已于 2024-06-17 10:51:05 修改 · 2.6w 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-06-17 10:49:59 首次发布

在Web设计中，背景图片是提升页面视觉效果的重要元素。实现背景图片全屏铺满且自适应是常见的需求。本文将介绍三种CSS技术，用以确保背景图片能够优雅地填充整个屏幕并适应不同设备。

方式一：使用`background-size`属性

CSS的background-size属性可以设置背景图片的尺寸，使其覆盖整个元素。

.element {
  background-image: url('path-to-image.jpg');
  background-size: cover; /* 确保图片覆盖整个元素 */
  background-position: center; /* 将图片居中显示 */
  min-height: 100vh; /* 确保至少为视口高度 */
}

方式二：使用`background-attachment`属性

通过设置background-attachment属性为fixed，可以使背景图片在页面滚动时保持固定。

.element {
  background-image: url('path-to-image.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-attachment: fixed; /* 背景图片固定 */
  min-height: 100vh; /* 至少为视口高度 */
}

方式三：使用伪元素和`calc()`

利用伪元素（如::after）和calc()函数，可以创建一个全屏的背景容器。

.element {
  position: relative;
  min-height: 100vh;
}

.element::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('path-to-image.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1; /* 确保伪元素在内容下方 */
}