迹忆客 专注技术分享

本文将教我们使用 CSS 缩放和拉伸背景图像。 有时，我们需要根据屏幕的视口或窗口大小来缩放背景图像，这就是我们将在本文中做的事情。

使用 CSS background-size 属性缩放背景图像以适合窗口

程序员可以使用 background-size CSS 属性来管理背景图像的大小。 如果我们使用 cover 作为 CSS background-size 属性的值，我们可以根据用户的窗口大小拉伸背景图像。

例如，我们创建了 <h1> 元素并添加了一些要显示的文本。 此外，我们使用 CSS background 属性将背景图像设置为整个身体。

我们已经将 4 个不同的值传递给背景属性。 第一个值表示背景图像的 URL。

no-repeat 表示背景图像不应该重复并且应该只在屏幕上显示一次。 center值表示背景图应该在屏幕中央，fixed表示背景图大小固定，不允许滚动。

此外，我们在 CSS 中使用了 background-size: cover 属性，它允许我们根据 body 元素的大小缩放图像。

HTML 代码:

<h1 class="text">This is the demo text.</h1>

CSS 代码:

body {
  background: url(https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg) no-repeat center fixed;
  background-size: cover;
}

输出:

在上面的输出图像中，用户可以看到图像被拉伸，并且单个图像作为网页的背景。

我们还可以使用 100% 作为 CSS background-size 属性的值，以根据用户屏幕的视口来适应背景图像，如下例所示。

CSS 代码：

body {
  background: url(https://img.test.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg) no-repeat center fixed;
  background-size: 100%;
}
<h1 class="text">This is the demo text.</h1>

输出:

我们仅在本文中学习了使用 CSS 缩放背景图像的两种不同方法。 用户可以根据自己的舒适度选择任何一种方式。