背景和边框

CSS 的background 属性是许多背景详细属性的简写形式，我们将在本课中学习这些属性。如果您在样式表中发现了一个复杂的背景属性，它可能看起来有点难以理解，因为可以同时传递很多值。

.box {
  background:
    linear-gradient(
        105deg,
        rgb(255 255 255 / 20%) 39%,
        rgb(51 56 57 / 100%) 96%
      )
      center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat,
    rebeccapurple;
}

我们将在本教程后面再讨论简写形式的工作原理，但首先让我们通过查看各个背景属性来了解 CSS 中可以使用背景执行的不同操作。

The background-color 属性定义了 CSS 中任何元素的背景颜色。该属性接受任何有效的<color>。background-color 扩展到元素的内容和内边距框下方。

在下面的示例中，我们使用了各种颜色值来为盒子、标题和<span> 元素添加背景颜色。

使用任何可用的<color> 值来尝试这些颜色。

The background-image 属性可在元素的背景中显示图像。在下面的示例中，我们有两个盒子——一个盒子的背景图像大于盒子本身(balloons.jpg)。另一个盒子有一个小星星的图像(star.png)。

此示例演示了有关背景图像的两个方面。默认情况下，大图像不会缩放到适合盒子的大小，因此我们只能看到它的一小部分，而小图像则平铺以填充盒子。

如果您除了背景图像之外还指定了背景颜色，则图像会显示在颜色的顶部。尝试向上面的示例添加 background-color 属性以查看其效果。

控制 background-repeat

The background-repeat 属性用于控制图像的平铺行为。可用的值有

• no-repeat — 完全停止背景重复。
• repeat-x — 水平重复。
• repeat-y — 垂直重复。
• repeat — 默认值；在两个方向上重复。
• space — 尽可能多地重复，如果有多余的空间可用，则在图像之间添加空格。
• round — 与 space 类似，但会拉伸图像以填充任何额外的空间

在下面的示例中尝试这些值。我们已将值设置为 no-repeat，因此您只会看到一颗星星。尝试不同的值（repeat-x 和 repeat-y）以查看它们的效果。

调整背景图像大小

在初始背景图像示例中使用的 balloons.jpg 图像是一个大图像，由于它大于其作为背景的元素，因此被裁剪了。在这种情况下，我们可以使用 background-size 属性，它可以采用 <length> 或 <percentage> 值，来调整图像大小以适合背景。

您也可以使用关键字

• cover — 浏览器会将图像放大到足以完全覆盖盒子区域的大小，同时仍然保留其纵横比。在这种情况下，图像的一部分可能会最终出现在盒子外面。
• contain — 浏览器会将图像调整到适合盒子内部的大小。在这种情况下，如果图像的纵横比与盒子的纵横比不同，您最终可能会在图像的左右两侧或顶部和底部出现间隙。

在下面的示例中，balloons.jpg 图像已设置长度单位以将其大小调整到盒子内部。您可以看到这扭曲了图像。

尝试以下操作。

• 更改用于修改背景大小的长度单位。
• 删除长度单位，然后查看使用 background-size: cover 或 background-size: contain 时会发生什么。
• 如果您的图像小于盒子，您可以更改 background-repeat 的值以重复图像。

定位背景图像

The background-position 属性允许您选择背景图像在其应用到的盒子上显示的位置。这使用了一个坐标系，其中盒子的左上角为 (0,0)，并且盒子沿水平 (x) 和垂直 (y) 轴定位。

最常用的 background-position 值采用两个单独的值——一个水平值后跟一个垂直值。

您可以使用诸如 top 和 right 之类的关键字（在background-position 页面上查找其他关键字）

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}

以及长度和百分比

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

您还可以将关键字值与长度或百分比混合使用，在这种情况下，第一个值必须引用水平位置或偏移量，第二个值引用垂直位置或偏移量。例如

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px top;
}

最后，您还可以使用 4 值语法来指示距盒子某些边缘的距离——在这种情况下，长度单位是从其前面的值偏移的。因此，在下面的 CSS 中，我们将背景定位在距顶部 20px 和距右侧 10px 的位置

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

使用下面的示例来尝试这些值并将星星在盒子中移动。

渐变（用作背景时）就像图像一样，也通过使用 background-image 属性设置。

您可以在 MDN 页面上阅读有关不同类型的渐变以及可以使用它们执行的操作的更多信息，该页面介绍了<gradient> 数据类型。一种玩渐变的有趣方法是使用网络上众多 CSS 渐变生成器之一，例如CSSGradient.io。您可以创建一个渐变并复制粘贴生成它的源代码。

在下面的示例中尝试一些不同的渐变。在两个盒子中，我们分别有一个拉伸到整个盒子的线性渐变和一个具有设定大小的径向渐变，因此会重复。

也可以使用多个背景图像——您可以在单个属性值中指定多个 background-image 值，并用逗号分隔每个值。

当您这样做时，您最终可能会使背景图像彼此重叠。背景将分层，最后一个列出的背景图像位于堆栈的底部，每个前面的图像都堆叠在其代码中后面的图像之上。

其他 background-* 属性也可以像 background-image 一样具有逗号分隔的值。

background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

不同属性的每个值都将与其他属性中相同位置的值匹配。例如，上面 image1 的 background-repeat 值将为 no-repeat。但是，当不同的属性具有不同数量的值时会发生什么情况？答案是较少数量的值将循环——在上面的示例中，有四个背景图像，但只有两个 background-position 值。前两个位置值将应用于前两个图像，然后它们将再次循环——image3 将获得第一个位置值，image4 将获得第二个位置值。

让我们玩玩。下面的示例包含两个背景图像。为了演示堆叠顺序，请尝试切换列表中哪个背景图像位于第一位。或者使用其他属性来更改位置、大小或重复值。

我们可用于背景的另一个选项是指定内容滚动时背景如何滚动。这由 background-attachment 属性控制，该属性可以采用以下值

• scroll：使元素的背景在页面滚动时滚动。如果元素内容滚动，背景不会移动。实际上，背景固定在页面上的相同位置，因此它会随着页面滚动而滚动。
• fixed：使元素的背景固定到视口中，以便在页面或元素内容滚动时它不会滚动。它将始终保持在屏幕上的相同位置。
• local：将背景固定到其设置的元素上，因此当您滚动元素时，背景会随之滚动。

The background-attachment 属性仅在有内容可滚动时才会生效，因此我们创建了一个演示来演示三个值之间的区别——请查看 background-attachment.html（还可以查看源代码）。

如本课开头所述，您通常会看到使用 background 属性指定的背景。此简写形式允许您一次设置所有不同的属性。

如果使用多个背景，则需要为第一个背景指定所有属性，然后在逗号后添加下一个背景。在下面的示例中，我们有一个具有大小和位置的渐变，然后是一个具有 no-repeat 和位置的图像背景，然后是一个颜色。

编写背景图像简写值时需要遵循一些规则，例如

• background-color 只能在最后一个逗号后指定。
• background-size 的值只能包含在 background-position 之后，并用“/”字符分隔，如下所示：center/80%。

查看 MDN 页面以了解 background 的所有注意事项。

当在背景图像或颜色上放置文本时，您应该注意文本与背景之间有足够的对比度，以便访客能够轻松阅读。如果指定了图像，并且将在图像上放置文本，则还应指定一个background-color，以便在图像未加载时文本仍然可读。

屏幕阅读器无法解析背景图像；因此，它们应该纯粹用于装饰。任何重要的内容都应成为 HTML 页面的一部分，而不是包含在背景中。

在学习盒子模型时，我们了解了边框如何影响盒子的尺寸。在本课中，我们将了解如何创造性地使用边框。通常，当我们使用 CSS 向元素添加边框时，我们会使用一个简写属性，在一行 CSS 中设置边框的颜色、宽度和样式。

我们可以使用border设置盒子四个边的边框。

.box {
  border: 1px solid black;
}

或者我们可以定位盒子的一个边，例如

.box {
  border-top: 1px solid black;
}

各个属性包括border-width、border-style和border-color简写属性。

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

每个边都有宽度、样式和颜色的完整属性。

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

您可以为边框使用各种样式。在下面的示例中，我们为盒子使用了两种不同的边框样式，为标题使用了两种不同的边框样式。您可以尝试不同的边框样式、宽度和颜色，以了解边框的工作原理。

通过使用border-radius属性及其与盒子每个角相关的完整属性来实现圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您只会传入一个值，该值将用于两者。

例如，要使盒子的四个角都具有 10px 的半径

.box {
  border-radius: 10px;
}

或者使右上角具有 1em 的水平半径和 10% 的垂直半径

.box {
  border-top-right-radius: 1em 10%;
}

我们在下面的示例中设置了所有四个角，然后更改了右上角的值以使其不同。您可以更改值来更改角。查看border-radius的属性页面以查看可用的语法选项。边框半径生成器可用于为您输出圆角值。

您已阅读完本文，但您能记住最重要的信息吗？在继续之前，您可以进行一些进一步的测试以验证您是否保留了这些信息——请参阅测试您的技能：背景和边框。

我们在这里涵盖了很多内容，您可以看到向盒子添加背景或边框有很多内容。如果您想了解更多关于此处讨论的任何功能的信息，请浏览不同的属性页面。MDN 上几乎每个页面都有您可以使用的示例来增强您的知识。

在下一篇文章中，我们将了解文档的书写模式如何与您的 CSS 交互。当文本不从左到右流动时会发生什么？

• 上一篇
• 概述：CSS 构建块
• 下一篇