背景还是背景颜色？ [复制]

Posted 2023-02-21

【中文标题】背景还是背景颜色？ [复制]

【英文标题】：background or background color? [duplicate]

【发布时间】：2014-08-09 18:05:20

【问题描述】：

在多个浏览器中最兼容的最佳做法是什么：

background:#ffffff;

或

background-color:#ffffff;

或者最好同时使用两者来覆盖更多：

background:#ffffff;
background-color:#ffffff;

【问题讨论】：

两者都兼容，但如果您只想将颜色应用于背景，我个人会使用“background-color”。

背景色更可取

如果你有类似的东西，实际上是有区别的： background: url(bg.png) repeat-y #FFFFFF;不同之处在于repeat-x 方向将被白色填充。你也可以通过使用 background-image、background-repeat、background-color 等来实现这一点……Background 只是一种组合所有背景属性的方式。

【参考方案1】：

兼容性没有区别。唯一的区别是使用background 您可以在同一行中添加多个属性，正如您可能知道的那样，而不是在不同的行中重复background-color、backgroud-image 等。

【参考方案2】：

要设置颜色，您可以使用其中任何一个。

根据 W3C 标准，我们将遵循 background-color 属性。但是，如果您按照此操作，您将只能添加颜色，而不能添加其他选项，例如 size, image, attachment 等。 我建议您使用标准格式，因为其他人很容易清楚地了解这些属性。

您可以从以下位置了解有关背景属性的更多信息：

W3C Schools - Background Property

【参考方案3】：

我更喜欢背景色。我的第一个原因是可读性，因为乍一看你可以知道这种风格的目的是什么。当您使用普通的“背景”时，您可以在其中定义许多属性，这使得阅读起来更加复杂。

Background: color position/size repeat origin clip attachment image|initial|inherit;

相对于background-color: color|transparent|initial|inherit;

而且ie不完全兼容所有背景属性：

注意：IE8 及更早版本不支持一张多背景图片 元素。

祝你好运！

【参考方案4】：

使用background 或background-color 并不重要，因为background 是以下的前缀/快捷方式：

-color
-image
-position
-attachment
-repeat

只是使用background 可以让您添加其额外的css属性以防止重复声明。它是 CSS 的基础之一。但是如果你只是想改变背景颜色而不做其他事情，我建议你使用background-color。