今天我们将学习 CSS 中 background 的各个属性及其对应的值。我们也会学习一些简写方法。让我们开始吧！🏅

如果你喜欢这篇文章，也可以在 YouTube 上观看本教程：

这是我们今天要讨论的所有属性的列表。末尾的红色文本是简写。

CSS 背景（background）属性让我们可以控制图像的大小和属性，这样我们就可以为不同大小的屏幕制作响应性强的图像。它能帮助我们创建响应式网页。

例如，

以及其他的一些功能！

在编码之前，你需要知道一点 HTML、CSS的相关知识，以及如何使用 VS Code。

要测试属性及其值，请遵循以下步骤：

在 HTML文件的 body标签中创建一个类名为 'container' 的 div。

在 CSS 中，你必须为容器设置一个高度，否则将不会看到图像。在我们的例子中，我们将它设置为 100vh，像这样：

图像在我的 GitHub repository 中。以下是获得它们的方法：

然后我们就准备好了！

让我们开始编程吧😊

使用这个属性，我们可以为元素添加背景图像。

在写完类名之后写如下语法：

我们可以通过两种方式使用 background-image 属性：

下面是使用图像路径时的 background-image 语法：

当你想在 CSS 中指定一个图像路径时，有三种情况：

当 image 和 style.css 在同一文件夹时, 它看起来像下面这样。

注意 kitty.png 和 style.css 在同一父级文件夹 Background-project 中：

要设置 kitty.png 的文件路径，在 style.css 中要编写以下代码：

当图像在下一级文件夹，style.css 在上一级文件夹时，注意，下图中的kitty.png 在 Assets 文件夹中，而 style.css 在上一级文件夹中。

要设置 kitty.png 的文件路径，我们需要在 style.css 中的引号后面写一个点和斜杠，就像这样（./）。然后我们写入文件夹的名称，然后斜杠（/），最后我们写入 image 的名称，像这样：

如果图像是在上一级文件夹中，我们需要返回。注意，在下图中，style.css 在 src 文件夹中，kitty.png 在 src 文件夹外。

要设置 kitty.png 的文件路径，我们要在 style.css 中的引号后面写两个点和一个斜杠（../）。然后我们写下图像的名称，像这样：

这个非常简单，将正确的链接插入到 url() 中即可。

要使用一个是链接的图像，我们需要写以下代码：

我们可以通过调整图像的 background-size 来调整图像大小。

在写完类名之后写如下语法：

你可以通过 3 种方式使用 background-size 属性：

让我们从讨论 cover 和 contain 值开始

Bear 大小 : [718px X 614px]

为此，我们必须包含一个图像，为其设置高度，并禁止图像重复。我们在 CSS 中这样做：

当我们使用这个属性时，当我们调整窗口大小的时候，它也会将图像拉伸到整个屏幕。请看下面的视频: 👇

步骤相同 - 我们必须包含一个图像，设置它的高度，并禁止图像重复，如下：

即使我们调整窗口的大小，它的值也不会发生改变。请看下面的视频：

通过 background-size 属性我们可以调整图像的宽度和高度。

以下是 CSS 中的语法：

当然，不要忘记插入一张图像，设置其高度，禁止重复。代码如下：

当我们使用这个值的时候，图像会保持其原来的大小，不会随着我们调整窗口大小而改变。如下：

这个属性会使对应图像重复多次。

我们在写完类名之后编写如下 CSS 语法：

这个属性有 6 个值：

下面是这 6 个值中每个值的结果。注意在这个例子中 kitty 的大小是 [200px X 200px]。

现在，我们来研究一下每个值会发生什么。但在此之前，我们需要插入一张图像并使用 background-image 属性，像这样：

通过使用这个值，我们可以沿着 X 轴和 Y 轴 重复对应图像多次，直到容器被填充满。在这，kitty 的大小是 200px x 200px。

为此，我们可以这么写：

顾名思义，我们可以使用这个值在容器 X 轴上重复对应图像，直到容器 X 轴被填充满。Kitty 的大小：200px X 200px。

为了实现这一点，我们这么写：

与 “repeat-x” 同理，但是是作用在 Y 轴上 的。Kitty 的大小：200px X 200px。

为了实现这一点，我们可以这么写：

我们使用这个值可以禁止图像重复，Kitty 大小：200px X 200px。

为了实现这一点，我们可以这么写：

这个值在 X 轴和 Y 轴都会起作用。当我们调整窗口大小时，我们可以看到值 space 和 round 之间的主要区别。注意，当我们调整窗口大小时，我们有 空的空间：

为了测试这个值，我们可以这么写：

这个值在 X 轴和 Y 轴都起作用。在调整窗口大小时注意图像拉伸。

跟着写 ->

此属性用于更改图像在屏幕上的位置。

语法如下：

当然不要忘记插入一张图像，设置高度，禁止图像重复。我们使用 background-size 属性设置 kitty 的大小到 200px X 200px：

结果如下：

你也可以使用这些值的组合：

例如，让我们将 kitty 设置到屏幕右下侧。代码如下：

结果如下：

计算屏幕的可用空间，% 值决定了图像的位置。代码如下：

结果如下：

这个属性允许我们在 CSS 盒子模型中设置图像的原点。

我们在写完类名之后编写如下语法：

它的四个值分别是：

在标准 CSS 盒子模型中，最外侧是 border，然后是 padding，最后是在中间的内容（content）。

下面是每个属性的结果：

为了重现这些结果：

代码像下面这样：

这个属性与 background-origin 属性类似，最主要的区别就是 background-clip 会将图像剪切，使其适应对应的 box，然而 background-origin 会将 content 推到 box 中。

我们在写完类名之后编写如下语法：

其四个值分别为：

下面是每个值的结果:

为了重现这些结果:

代码像下面这样：

这个属性允许我们在滚动时控制内容和图像的行为。

我们在写完类名之后编写如下语法：

其三个值如下：

当我们使用 scroll 时，图像会随着页面的滚动而滚动（这是默认的）。使用 fixed 时图像不会随着页面其余部分的滚动而移动，在屏幕中是固定的。而 local 会随着元素内容的滚动而滚动，直到滚动到内容结束。

你可以在这里看到结果。

Here's where I got this pen.

你可以使用这个属性填充背景颜色。

我们在写完类名之后编写如下语法：

在众多值中，最受欢迎的是：

如何通过名称或者十六进制获得一个纯的背景颜色？

你可以使用颜色的名称来设置背景颜色，像这样：

或者，你也可以使用十六进制来设置颜色，像这样：

你可以查看这些链接来获得更多颜色：

我们使用 RGB() 颜色函数来设置背景颜色，像这样：

或者你也可以使用 RGBA() 来设置颜色和透明度，像这样：

这是一个用颜色命名为 'Eton blue' 的不同不透明度的测试：

如何通过 linear-gradient() 函数来设置背景颜色？

你可以使用此函数创建一个不少于一种颜色的渐变颜色。以下是一些渐变颜色的例子：

你可以浏览 这个网站 来获得更多颜色相关的 CSS 代码。

让我们重新创建这个背景色：

'#22c1c3' 表示左边的颜色，'#fdbb2d'表示右边的颜色。'90deg' 告诉我们如何通过这两种颜色的梯度创建一个渐变。

代码如下：

下面是 background 属性的简写顺序：

对于这个案例，我们将图像 kitty.png 放在长和宽都为 200px，蓝色背景的容器中。代码如下所示：

下面是使用简写的代码：

这个简写确实节省了我们的时间。如果你想要跳过某个属性，你只需要保证其余属性的顺序即可。

这是你读到最后的奖励 ❤️

欢迎提出建议和批评 ❤️

YouTube / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

原文：Every CSS Background Property Illustrated and Explained with Code Examples 🎖️，作者：Joy Shaheb