在每个屏幕上使背景充满 CSS

介绍

在前端开发过程中，我们经常需要设置背景图片或颜色。但是，一些屏幕的大小和比例可能与我们设想的不同，导致背景图或颜色无法完全填充整个屏幕，影响页面美观性和用户体验。本文将介绍如何通过 CSS 让背景充满整个屏幕，让页面更加美观。

设置背景图片

通过 background-size 属性设置

设置背景图片大小为 cover 或 100% 100%，可以将图片缩放到完全覆盖整个屏幕。

body {
  background-image: url(background.jpg);
  background-size: cover;
}

body {
  background-image: url(background.jpg);
  background-size: 100% 100%;
}

通过 background-position 属性设置

通过设置背景图片的位置，可以让图片完全覆盖整个屏幕。

body {
  background-image: url(background.jpg);
  background-size: auto;
  background-position: center center;
  background-repeat: no-repeat;
}

设置背景颜色

通过设置 height 为 100% 和设置 margin 和 padding 为 0

通过设置文档的高度为 100%，可以让背景颜色填满整个屏幕。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f1f1f1;
}

通过设置 min-height 为 100vh

设置最小高度为 100vh，可以让背景颜色在任何情况下都完全覆盖整个屏幕。

body {
  min-height: 100vh;
  background-color: #f1f1f1;
}

结论

通过以上方法，我们可以轻松实现让背景图片或背景颜色充满整个屏幕的效果。同时，我们也可以根据各种情况选择不同的方法，让页面更加美观。