css3全屏背景图

CSS3全屏背景图是一种将图片作为网页背景的技术，可以让网页背景充满整个屏幕，无论屏幕大小如何变化，背景图都会自动适应屏幕尺寸。这种技术可以为网页增加视觉效果，提升用户体验。

在CSS3中，可以使用`background-size`属性来实现全屏背景图。该属性用于设置背景图片的大小，其中的值可以是具体的像素值，也可以是百分比值。为了实现全屏背景图，我们可以将`background-size`属性的值设置为`cover`，这样背景图片会按比例缩放并完全覆盖容器。

例如，假设我们有一个div容器，希望将一张名为"bg.jpg"的图片作为全屏背景图，可以使用如下的CSS代码：

div {
  background-image: url("bg.jpg");
  background-size: cover;
}

上述代码中，我们将背景图片的URL设置为"bg.jpg"，然后将`background-size`属性的值设置为`cover`，这样背景图就会自动缩放并覆盖整个div容器，实现全屏背景效果。

除了`cover`值，`background-size`属性还可以使用其他的值来调整背景图片的大小。例如，可以使用`contain`值来保持图片的纵横比例并确保整个图片都能完整显示在容器中，即使容器的大小与图片的比例不一致。

CSS3还提供了`background-position`属性来控制背景图片在容器中的位置。该属性可以使用具体的像素值或百分比值来设置图片的位置。例如，可以使用如下的CSS代码将背景图片居中显示在容器中：

div {
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
}

上述代码中，我们将`background-position`属性的值设置为`center`，这样背景图片就会在容器中居中显示。

总结来说，CSS3全屏背景图可以通过设置`background-size`属性为`cover`来实现，同时可以使用`background-position`属性来控制图片的位置。这种技术可以为网页增加视觉效果，提升用户体验。