如何使用 CSS 创建全屏背景图片

引言

很多时候，当我们访问网页时，网页上会有背景图片。我们可以在本文中创建那种全页背景图片。全页背景图片可以增强用户体验，并使网站脱颖而出。

设置背景图片

我们可以借助 CSS background-image 属性创建全页背景图片。我们必须将图片 URL 作为 CSS background-image 属性的输入。

借助下面的示例，我们可以创建全页背景图片。

在上面的代码中，我们将 body 元素设置为背景图片的容器，这将显示网页的背景图片。

当需要设置背景图片时，考虑图片尺寸与屏幕尺寸的关系非常重要。如果我们不考虑这一点，那么如果图片尺寸较小，在较大的屏幕上显示时可能会出现像素化或拉伸。同样，如果图片尺寸过大，可能会对网页加载产生负面影响。

在上面的代码中，我们使用了 cover，它告诉浏览器根据需要缩放图片，使其适合整个网页，同时保持图片的纵横比。如果我们希望图片填充网页的中心，但又不想使其拉伸或失真，那么这对开发者来说将是一个不错的选择。

让我们通过一个例子来理解这一点。

HTML 代码

输出

说明

在上面的代码中，我们插入了一个宽度为 100vw、高度为 100vh 的背景图片，并将 background-size 设置为 cover。

理解 background-size 属性

background-size 属性有一些值，如下所示。

1. Auto: 此值根据图片文件的实际大小确定背景图片的大小。这是 HTML 中 background-size 属性的默认值。
2. Length: 此值帮助我们提供图片的长度，例如 20px 或 10em。它还有助于我们将图片的宽度和高度设置为指定值。
3. Percentage: 这允许我们将背景图片的大小设置为 50% 或 75%。它还有助于将图片的宽度和高度设置为元素大小的百分比。
4. Cover: 此值将缩放背景图片，使其尽可能大，以便图片可以覆盖整个元素，同时保持其纵横比。
5. Contains: 此值还将背景图片缩放到最大尺寸，以便背景图片的宽度和高度都能适应元素内。
6. Initial: 借助此值，我们可以将属性设置为其默认值。
7. Inherit: 借助此值，我们可以从其继承值
8. Inherit: 借助此值，我们可以从其父元素继承值。

image-set() 函数

借助此函数，我们可以为不同的设备分辨率提供不同版本的图像。当我们在像素密度高的各种设备（如智能手机和平板电脑）上打开网站时，这会很有帮助，同时为像素密度低的设备使用较低分辨率的图像。

让我们通过一个例子来理解这一点

HTML 代码

输出

说明

在上面的代码中，我们借助 image set 函数插入了两张背景图片。我们还为像素密度为 1x 的设备提供了低分辨率版本，为像素密度为 2x 的设备提供了高分辨率版本。

此 image set 函数将一系列图像 URL 和分辨率作为参数输入。

全屏背景的高级技术

除了 CSS 属性之外，还有许多其他方法可以创建全屏背景图片。最实用的属性之一是 background-repeat 属性。借助此属性，我们可以填充网页，其中图片将水平和垂直平铺。我们还可以将值设置为 repeat-x、repeat-y 或 no-repeat 来定义图像应如何重复。

让我们通过一个例子来理解这一点。

HTML 代码

输出

注意：如果我们将 background-size 属性设置为 cover，那么 repeat 将无效。此外，借助 background-position 属性，我们可以指定背景图片在容器内的位置。我们可以使用此属性将图片居中或将其位置调整到容器的左侧、右侧、顶部或底部。借助 background-blend-mode 属性，我们可以叠加多个背景图片并创建更复杂的效果。我们还可以通过在 background-blend-mode 属性中选择 multiply、screen 和 overlay 来指定背景图片的颜色。

让我们通过一个例子来理解这一点。

HTML 代码

输出

说明

在上面的代码中，我们将两张图片组合为 body 元素的背景，第一张图片位于中心，第二张图片位于容器的底部。

添加动态背景图片

假设 CSS 需要动态背景图片。在这种情况下，我们可以使用 CSS 属性和 JavaScript 根据用户交互或其他事件（例如，在一定时间间隔后更改背景）动态更改背景图片。

让我们通过一个例子来理解这一点。

代码

输出

如果我们点击“更改背景”按钮，背景图片就会被更改。

在上面的示例中，当用户单击按钮时，图像会交换。在 JS 代码中，我们实现了以下代码

如何修复 CSS background-image 不工作的错误

我们使用 CSS background-image 属性有很多原因，但它没有正常工作。以下是一些问题

1. 检查图片 URL

我们必须确保我们使用的图片的 URL 是正确且可访问的。我们也可以通过在浏览器中直接打开 URL 来测试它，看看图片是否加载。

2. 确认文件路径

如果我们使用的是本地图片，应该仔细检查文件路径。我们还必须确保文件位于相对于定义了 background-image 属性的 CSS 或 HTML 文件的正确目录中。如果图片在不同的文件夹中，我们可能还需要调整图片文件的路径。

3. 验证文件格式

如果我们使用的是本地图片，我们必须确保图片文件路径中指定的文件格式（例如，JPEG、PNG、GIF）与我们保存的图片的实际文件格式相匹配。

4. 检查 CSS 语法错误

我们还应该检查 CSS 代码的语法，例如丢失或多余的字符、不正确的属性名称或无效值。即使是一个小错误也可能导致 background-image 属性无法正常工作。

5. 使用浏览器开发者工具检查元素

要检查元素，我们应该使用浏览器的开发者工具。