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

ssoni_

于 2025-05-14 15:56:42 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/shenshen_ouni/article/details/147956543

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

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

.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; /* 确保伪元素在内容下方 */
}