3种CSS实现背景图片全屏铺满自适应的方式

/* 方法1: 使用CSS3的background-size属性 */
body {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
 
/* 方法2: 使用背景图片作为HTML元素，并利用CSS的filter属性进行模糊效果 */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(5px);
}
 
/* 方法3: 使用伪元素来实现全屏背景图片 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

这段代码展示了三种不同的方法来实现背景图片全屏铺满且自适应。第一种方法使用了background-size属性的cover值，确保背景图片覆盖整个元素并且保持其宽高比。第二种方法通过创建一个模糊的背景层，并设置其pointer-events属性为none来实现背景图片的全屏显示。第三种方法则是使用::after伪元素来创建一个全屏的背景图层。每种方法都有其特点，可以根据实际需求选择合适的方式实现背景效果。