css背景全屏不变形

想要让网页的背景布满整个屏幕，但是如果图片不符合屏幕的长宽比例，会形成拉伸或者压缩的效果，很影响用户的感受。这时候，css可以帮助我们实现背景全屏不变形的效果。

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.full-screen-bg {
  /*图片链接*/
  background: url("bg-img.jpg") no-repeat center center fixed;
  /*使用cover属性将背景图片覆盖整个元素*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 

代码中，我们使用了css的一个属性background-size，可以让图片沿各个方向铺满背景。同时使用“cover”选项可以确保图片在整个元素上都能够相应地显示。这样，无论屏幕分辨率多高，我们的图片都能自适应于屏幕大小，且不遭到变形。