背景图像 CSS 填充屏幕 - CSS

在网站设计中，背景图像是不可忽略的一个元素，能够为网站增加美感、提升用户体验感。而如何将背景图像填充屏幕则是一个比较基础的问题。下面，我们将介绍几种常用的 CSS 技巧，实现背景图像填充屏幕。

1. 使用 background-size

body {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

在 body 元素中设置背景图像，并使用 background-size 属性设置图像填充方式。cover 填充方式表示背景图像尽可能的覆盖整个屏幕，并保持图像的纵横比例，但可能会被裁剪掉部分图像。

2. 使用 vh、vw 单位

body {
  background-image: url('path/to/image.jpg');
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  background-position: center center;
}

使用 viewport 的宽度（vw）和高度（vh）单位可以使背景图像填充整个屏幕，在保持图像的纵横比例下，不会有任何图像被裁剪。但设置 background-size 为 100vw 100vh 时，浏览器会将背景图像压缩变形，而造成图像失真。那么我们可以使用以下方式避免图像失真：

body {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
}

同时在 body 元素中设定最小高度为 100vh，可以避免图像变形。

3. 使用 ::before 或 ::after 伪元素

body::before {
  content: "";
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

使用 ::before（或 ::after）伪元素，用来设置一个固定位置，覆盖整个屏幕，并填充图像。同时使用 content: "" 属性来打开伪元素的内容渲染，将其大小设置为和屏幕一样大小。最后将其 z-index 属性设置为 -1，以便在所有内容下方，相对于其他内容的重叠。

结论

以上是实现背景图像 CSS 填充屏幕的几种常用方式，希望这些技巧可以帮助到你。在实际开发过程中，依据实际情况运用这些技巧，既可以实现视觉效果，又能保证网站性能的优化，提高用户体验。