CSS 中的 Background-Size

引言

我们可以借助 background-size 属性来确定背景图像的大小。我们可以使图像向左、拉伸并适合可用空间。background-size 属性的实现有很多语法。我们可以借助值和单位值来设置 background-size 属性。

在单位值中，我们可以以百分比或像素的形式定义 background-size 属性。我们也可以借助全局值来定义它。我们可以通过下面的代码片段来借助全局值实现它。

让我们简要地理解这个主题。

关键字值

我们可以借助 cover 和 contain 使用关键字值。我们可以借助这些关键字值更改背景大小。

1. Cover（覆盖）

我们可以借助 cover 关键字设置背景大小。如果我们将背景大小定义为 cover，那么图像将填充容器而不会留下任何空间。它还会放大图像以适应屏幕。

让我们借助下面的示例来理解这一点。

示例 1

代码

输出

说明

在上面的代码中，我们将 background-size 属性设置为 cover，这样图像将正确放大并填充容器。

2. Contain（包含）

我们可以借助 contain 关键字设置 background-size。如果我们将 background-size 定义为 contain，那么图像将完全调整大小，并且它还将确保图像将正确可见。它还会缩放图像，以便图像将填充容器而不会裁剪图像。

让我们借助下面的示例来理解这一点。

示例 2

代码

输出

说明

在上面的代码中，我们将背景大小实现为 contain，这样图像就可以在保持其纵横比的同时适应 `.background-container`。`background-repeat: no-repeat` 确保背景图像不会重复。

注意：我们也可以将背景大小用作 auto。如果这样做，图像将以其原始大小显示。Auto 是 background-size 属性的默认值。

单位值

我们还可以将 background-size 属性的值设置为单位值。单位值包含像素或百分比形式的值。下面是一些解释单位值作为属性值实现的片段。

让我们看一个将单位值实现为百分比值的示例。

示例 3

代码

输出

说明

在上面的代码中，我们可以调整 background-size 属性中的百分比值，以控制图像相对于容器的宽度和高度。

全局值

我们还可以在 background-size 属性中提供一些全局值。这些如下所示。

1. Inherit（继承）

借助此关键字，我们可以更改元素的属性，使其类似于父元素的属性。换句话说，我们可以说继承概念在此情况下实现。

示例 4

代码

输出

说明

在上面的代码中，我们在另一个 div 标签中创建了一个 div 标签。`.container` 类中的 `background-size: inherit;` 属性导致容器的背景图像继承其父元素（在本例中为 body 元素）的大小。body 元素的背景设置为浅灰色。

2. Initial（初始）

借助此关键字，我们可以通过指定初始值来更改元素的初始值。它也有一些默认值。让我们通过一个示例来清楚地理解它。

示例 5

代码

输出

说明

在上面的代码中，我们创建了一个 hero 类，并在 hero 类中将背景大小实现为 initial。此属性确保背景图像以其原始大小显示。我们可以垂直和水平地创建内容。我们可以使用半透明背景和圆角为设计增添一丝优雅。

3. Unset（取消设置）

借助 unset 属性，我们可以替换 initial 和 inherited 属性。如果我们将属性设置为 inherit，则 unset 属性变为 inherit。如果我们将属性未设置为 inherit，则 unset 属性变为 initial。让我们借助下面的示例来理解这一点。

示例 6

代码

输出

说明

在上面的代码中，我们将 background-size 属性设置为 unset。它允许背景图像以其原始大小显示。我们可以使用包含带叠加层和内容的居中容器的设计。叠加层提供半透明背景以使文本更具可读性，并且内容居中于容器中。

一个值

每当代码中只需要一个值时，我们就必须选择一个值。如果我们设置一个值，那么另一个值会自动变为 auto。让我们通过一个示例来理解这一点。

示例 7

代码

输出

说明

在上面的代码中，我们将 background-size 属性设置为 70%。这意味着背景将占据整个网页的 70%，并且它还保持其纵横比。

两个值

如果我们为 background-size 属性设置两个值，那么它将影响背景图像的高度和宽度。第一个值用于图像的高度，第二个值用于图像的宽度。让我们通过一个示例来理解这一点。

示例 8

代码

输出

说明

在上面的代码中，我们将 background-size 设置为 60% 到 80%。第一个值（60%）将背景图像的宽度调整为网页宽度的 60%，而第二个值（80%）将背景图像的高度调整为网页高度的 80%。

多张图像

我们还可以设置多张图像作为背景图像。我们可以通过使用逗号分隔的多张图像来实现此目的。让我们通过一个示例来理解这一点。

示例 9

代码

输出

说明

在上面的代码中，三个背景图像通过 background-image 属性组合在一起。background-size 属性指定每个背景图像的大小：第一个图像的宽度为 30%，第二个图像的宽度为 40%，第三个图像为 cover。background-position 属性为每个图像设置不同，以创建平衡的构图。