CSS 背景属性 - 速记与长格式

Question

据我了解，当您使用简写属性 background 时，浏览器首先将所有背景属性设置为其默认值，然后放入您声明的值。那么使用 background-color:white 会更好吗？而不是 background:white？当您输入更多值(例如背景位置或背景图像)时，这会发生变化吗？还是单独声明属性总是最好的？

我认为一定存在某种临界点，即字节数的节省与通过单独指定属性获得的处理时间相平衡。但是，我可能完全错了 - 这就是我在这里问的原因。

Answer 1

我听说过有关最佳实践的信息，但如前所述，处理甚至加载时间方面的差异可以忽略不计。除了样式表中有意义的内容之外，没有关于何时使用这些规则的最佳实践。真正的区别在于它们对继承属性的影响不同。设置 background-color: white; 只会覆盖 background-color 规则(无论它最初是否设置为 background 或 background-color) 但 background 将覆盖任何/所有 background 规则集，因此可能会杀死背景图像和相关的 background-repeat 等。这是一个例子:

.box {
    background: url(star.png); // set with just background instead of background-image
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
}
.box1 {
    background-color: blue;
}
.box2 {
    background: green;
}

像 HTML 一样:

<div class="box1 box"></div>
<div class="box2 box"></div>

.box1 将显示 star.png 图像(如果图像是透明的，则带有蓝色背景)，而 .box2 将只显示绿色背景，没有图像。这两条规则的最佳实践类(class)是评估一般的 CSS 创作和继承——而不是渲染性能。请记住，通常最好将 background 应用于元素的最一般/抽象规则，然后使用类或 ID 和 background-color< 覆盖更具体实例的属性、背景图片等