Background Shorthand CSS

什么是背景简写属性？

在 CSS 中，背景简写属性用于一次性设置所有背景样式属性，例如图片、颜色、大小、以及源或重复方式。我们不能在背景简写属性中设置组件属性。所有值都将设置为其默认值。

简单来说，我们使用此属性可以缩短我们的代码或程序，并且它还有助于我们在一个属性中指定所有背景属性。它被称为 CSS 简写属性。

语法

使用背景简写属性，我们可以这样写

而不是写成这样

使用背景简写属性可以声明八个背景属性

• 背景颜色 (Background-color): 使用 background-color 属性，我们可以为 HTML 元素分配背景颜色。
• 背景图片 (Background-image): 使用 background-image 属性，我们可以向 HTML 元素添加一个或多个图像。我们还可以通过在 CSS 中用逗号分隔背景 URL 来设置多个背景图像。
• 背景位置 (Background-position): 借助此属性，我们可以设置图像和渐变的位置。
• 背景大小 (Background-size): 此属性有助于我们修改背景图像的大小。我们可以将图像设置为保持其原始大小，拉伸它们，或将它们适应特定区域。
• 背景重复 (Background-repeat): 此属性有助于我们控制背景图像如何垂直或水平重复。我们也可以选择图像是否重复。
• 背景附件 (Background-attachment): 此属性指示背景图像的位置是固定的，还是在滚动网页时可以移动。
• 背景源点 (Background-origin): 使用此属性，我们可以设置 CSS 背景的显示方式：在边框内、在内边距内，或从一侧到另一侧。
• 背景裁剪 (Background-clip): 此属性有助于我们设置背景图像可以离开元素内边距或内容的程度。

使用时，它可以用至少一个空格字符分隔。当我们指定 background-size 值时，它必须紧跟在 background-position 值之后。此外，background-position 和 background-size 之间必须有一个斜杠，例如 (top right/contain)。

可能的值

在 CSS 的 background 简写属性中，我们可以使用的一些可能的值

• border-box 是默认值。它有助于我们将背景图像或颜色延伸到边框的外边缘。
• padding-box 有助于防止图像颜色溢出内边距。
• 我们可以将 content-box 应用于图像或仅应用于指定元素的内容的颜色。

背景简写属性的顺序

当我们使用背景简写属性时，我们需要遵循属性值的顺序，即

• 背景颜色
• 背景图片
• 背景重复
• 背景附件
• 背景位置

我们可以使用我们喜欢的这些属性的任何组合，顺序几乎都可以（尽管规范中推荐的顺序是上面的）。但有一个注意事项：当我们不指定任何背景属性时，它会自动设置为其默认值。

多重背景

在 CSS3 中，它提供了对多重背景的支持，这些背景可以叠加在一起。如果任何属性与背景相关，则可以接受逗号分隔的列表。

例如

输出

为什么我们使用背景简写 CSS？

使用背景简写 CSS 属性有助于更简洁明了地为元素设置多个背景属性。而不是单独指定所有属性，我们可以一次性指定它们。

以下是我们使用 CSS 背景简写属性的一些原因

简洁性

它有助于我们减少需要编写和维护的代码量，使我们的 CSS 文件更具可读性，更易于管理。

清晰度

它还提供了一种清晰紧凑的方式来一次定义多个背景属性，这有助于提高代码的可读性，特别是当我们团队合作时，或者我们在以后回顾我们的代码时。

性能

当我们将多个背景属性组合成单个声明时，我们可以稍微提高性能，因为浏览器只需要解析一个属性而不是几个。

易用性

它还通过允许我们在单行代码中指定多个背景属性来简化设置它们的流程，这使得尝试不同组合变得容易。

总而言之，我们可以使用背景简写 CSS 属性来简化我们的 CSS 代码，使其更有效，并提高开发和维护工作流程。

示例

输出