CSS设置背景最快的方法 一行搞定8个属性 web代码

速度在web开发中是必不可少的，尤其是在制作原型的时候。

如果你一分钟大不了150个字，添加背景是一个很耗时的事儿。而且说实话…谁愿意输入background-*: value;8次呢？

background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;

这样输入不但费时间还占地方，我们可以用background速记符号把所有内容转换为一行：

background: scroll padding-box border-box transparent none 0% 0%/auto repeat;

整洁吧？

在本文中，我们展示此速记的工作原理，以及为使该速记工作需要遵循的规则。

必需的属性

你现在可能正在考虑：

好吧，整合到一行效率确实高。但是我还需要写所有值吗？

否。background速记中的所有属性都是可选的（同样适用于字体设置）。

不过要小心。

如果不包含其中一个属性的值，则将使用其默认值，即便早先设置了该属性。

属性顺序

属性的顺序无关紧要。除了一些小例外：

位置和大小

background-size只能紧跟在background-position之后，并且必须用斜杠（/）隔开。

这意味着您background-size不能不background-position使用此速记键进行设置。

有两种方法可以解决此问题：

1. 使用默认background-position值：0% 0%。例如0% 0%/50%将设置background-size为50%并保持background-position不变。
2. background-size在背景速记后面分别设置。像这样：

background: url("cat.png");
background-size: 50%;

IMPORTANT: If you try setting background-size in the shorthand using one of its keywords (cover or contain) without the background-position the whole background property will be treated as invalid and ignored.

📦起源

由于background-origin和background-clip的严重重叠…

• border-box
• padding-box
• content-box
• text-这是例外。仅适用于background-clip。

…使用速记设置它们的方式有些不同。

如果仅包含其中一个box值，则将同时用于background-origin和background-clip。

如果包含两个，则第一个用于，background-origin第二个用于background-clip。

如果不添加任何值，则这两个属性将保留其默认值。

就是为什么我在图像中将它们标记为box的原因。

注意：据我所知，背景速记不支持background-clip的text值。因此，如果要创建渐变文本，则必须background-clip单独设置。

多值语法

一些背景属性可以接受多个值。重要的是要使这些值彼此相邻并以正确的顺序排列。

background-size -如果提供两个值，则第一个设置图像的宽度，第二个设置图像的高度。

background-repeat -如果提供两个值，则第一个设置水平（x）轴的重复行为，第二个设置垂直（y）轴。

background-position -如果提供两个值，则第一个控制图像的水平位置，第二个控制图像的垂直位置。

🎨颜色和图像

背景速记允许您将颜色或图像设置为背景。您甚至可以同时设置两者。

等等，为什么我两个都需要？

background-color在许多情况下，设置后备广告很有用：

• 如果图像URL损坏或图像加载时间较长，则背景色可能是很好的占位符。
• 如果图像包含透明度，则背景颜色将在下面可见。
• 如果background-repeat的值不是repeat或round，则可能存在图像未覆盖的区域。这些区域将填充背景色。可以在background-repeat示例图像中看到以上内容。

渐变色

您是否曾经尝试过将渐变设置为background-color，但惊讶于它不起作用？

这是因为渐变是CSS中的图像。这是背景速记派上用场的地方。

The background shorthand is the best way to set anything as a background. Including:

– gradients
– images
– colors

You don’t have to remember which to use: background-image or background-color. Plus, it’s the shortest. pic.twitter.com/0L3E0a7V8D

— Mateusz Hadryś (@HadrysMateusz) December 21, 2020

层数

就像所有其他background-*属性一样，background速记可以接受多个逗号分隔的层。

background: url(cat.png) no-repeat scroll, 
            url(grass-texture.jpg) repeat local green;

您只需要记住一件事。一个元素只能有一个background-color，并且必须位于最后一层（底部）。否则，整个属性将被视为无效。

备忘单

如果您需要提醒，这里有一个备忘单😃