[分享]css全屏背景代码自适应

前端开发中，实现全屏背景图是非常常见的需求。特别是在移动端，由于屏幕尺寸差异较大，因此需要使用CSS实现自适应的全屏背景。在CSS3中，我们可以使用backgroundsize:cover属性，将背景...

前端开发中，实现全屏背景图是非常常见的需求。特别是在移动端，由于屏幕尺寸差异较大，因此需要使用CSS实现自适应的全屏背景。
在CSS3中，我们可以使用background-size:cover属性，将背景图缩放并覆盖整个屏幕。但是这种方式会导致图片变形、拉伸等问题，因此并不是完美的方案。
接下来，我们可以使用CSS裁剪技术，将图片根据屏幕比例裁剪，并显示合适的部分。具体实现如下：

html, 
body {
  height: 100%; //设置html和body的高度为100%
  margin: 0;
  padding: 0;
}

.fullscreen-background {
  background: url('image.jpg') center center no-repeat; //设置背景图居中显示
  background-size: cover; //使用cover属性缩放背景图
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; //隐藏超出屏幕范围的背景
}

.fullscreen-background:before {
  content: "";
  background: url('image.jpg') center center no-repeat; //与上面的background相同
  background-size: contain; //使用contain属性保持图片比例
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  position: absolute;
  z-index: -1; //将伪元素置于底层
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} 

以上代码中，我们使用:before伪元素设置一个与背景图相同的覆盖整个页面的元素，并使用contain属性保持图片比例。同时，设置背景图的overflow属性为hidden，可以避免因为图片超出屏幕范围而显示不完全的问题。
总结一下，通过以上CSS的设置，我们可以实现一种自适应的全屏背景效果。同时，当屏幕尺寸发生变化时，图片也会随之做出相应的调整，使得页面更加美观。