背景和背景颜色有什么区别答案

【问题标题】：What is the difference between background and background-color背景和背景颜色有什么区别
【发布时间】：2012-04-29 15:11:14
【问题描述】：

使用background 和background-color 指定背景颜色有什么区别？

片段 #1

body { background-color: blue; }

片段 #2

body { background: blue; }

【问题讨论】：

标签： css background background-color

【解决方案1】：

假设这是两个不同的属性，在您的具体示例中，结果没有区别，因为background 实际上是

background-color  
background-image  
background-position  
background-repeat  
background-attachment  
background-clip  
background-origin  
background-size

因此，除了background-color，您还可以使用background 简写添加一个或多个值，而无需多次重复任何其他background-* 属性。

选择哪一个基本上取决于您，但它也可能取决于您的样式声明的特定条件（例如，如果您在从父元素继承其他相关的background-* 属性时只需要覆盖background-color，或者如果您需要删除除 background-color 之外的所有值。

【讨论】：

所以background 只是 5 个属性中任何一个的快捷方式？因此，如果有背景位置、颜色和图像，在现实生活中不实用？
非常实用，因为您可以在一行中指定所有这些属性。参考Official Documentation
有区别。使用背景色时，我有一个 div，其子元素之间存在透明间隙。但是当我只使用背景时它是完全可靠的。它们的属性或行为存在可验证的差异。
Fwiw，来自@ChristianVarga 的链接：'background' 属性是用于设置各个背景属性（即，'background-color'、'background-image'、'background -repeat'、'background-attachment' 和 'background-position'）在样式表的同一位置。给定一个有效的声明，'background' 属性首先将所有单独的背景属性设置为其初始值，然后分配声明中给出的显式值。给出的示例：P { background: url("chess.png") gray 50% repeat fixed }
更多信息developer.mozilla.org/en-US/docs/Web/CSS/background

【解决方案2】：

background 将取代之前的所有background-color、background-image 等规范。它基本上是一种速记，但也是一种重置。

我有时会使用它来覆盖模板自定义中以前的 background 规范，我想要以下内容：

background: white url(images/image1.jpg) top left repeat;

如下：

background: black;

因此，所有参数（background-image、background-position、background-repeat）将重置为其默认值。

【讨论】：

这是一个比较完整的答案，reset部分是很重要的区别。
developer.mozilla.org/en-US/docs/Web/CSS/background -> 与所有 css 速记属性一样，任何省略的子值都将设置为其初始值 > background-image: none background-position: 0% 0% background-size:自动自动背景重复：重复背景来源：填充框背景剪辑：边框框背景附件：滚动背景颜色：透明

【解决方案3】：

关于CSS性能：

background vs background-color：

18 个色样在一个小页面上呈现 100 次的比较矩形，一次带有background，一次带有background-color。

虽然这些数字来自单个页面重新加载，但随后刷新渲染时间改变了，但百分比差异是每次基本都一样。

使用时节省了将近 42.6 毫秒，速度几乎是原来的两倍 Safari 7.0.1 中的背景而不是背景颜色。铬 33 看起来差不多。

这真的让我大吃一惊，因为在最长的时间里有两个原因：

我通常总是主张明确 CSS 属性，尤其是背景，因为它会对未来的特异性产生不利影响。

我以为当浏览器看到background: #000;时，他们真的看到background: #000 none no-repeat top center;。我这里没有资源链接，但我记得在某处读过这篇文章。

参考： https://github.com/mdo/css-perf#background-vs-background-color

【讨论】：

我是为此而来的——真的，真的对结果感到惊讶。感谢您的回答。
你能不能说所有的 CSS 简写都因为性能更好而更受欢迎？
@LeventDivilioglu 正如测试人员所说：These kind of tests are cheats and always going to be somewhat inaccurate from the real worldgithub.com/mdo/css-perf#updated-conclusions-from-averages

【解决方案4】：

使用background，您可以设置所有background 属性，例如：

background-color
background-image
background-repeat
background-position
等

background-color 可以指定背景颜色

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

More info

（参见标题：背景 - 速记属性）

【讨论】：

【解决方案5】：

其中一个区别：

如果您以这种方式使用图像作为背景：

background: url('Image Path') no-repeat;

那么你不能用“背景颜色”属性覆盖它。

但如果你使用背景来应用颜色，它与背景颜色相同，可以被覆盖。

例如：http://jsfiddle.net/Z57Za/11/ 和 http://jsfiddle.net/Z57Za/12/

【讨论】：

【解决方案6】：

没有区别。两者的工作方式相同。

CSS背景属性用于定义背景效果一个元素。

用于背景效果的 CSS 属性：

背景色

背景图片

后台重复

背景附件

背景位置

背景属性包括所有这些属性，你可以将它们写在一行中。

【讨论】：

【解决方案7】：

他们都是一样的。有多个背景选择器（即background-color、background-image、background-position），您可以通过更简单的background 选择器或更具体的选择器来访问它们。例如：

background: blue url(/myImage.jpg) no-repeat;

或

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

【讨论】：

【解决方案8】：

不同之处在于background 速记属性设置了几个与背景相关的属性。即使您只指定例如，它也会设置它们。颜色值，从那时起其他属性设置为其初始值，例如background-image 到 none。

这并不意味着它总是会覆盖这些属性的任何其他设置。这取决于通常被误解的规则的级联。

在实践中，速记往往更安全一些。这是一种预防措施（不完整，但很有用），以防止意外地从另一个样式表中获取一些意外的背景属性，例如背景图像。此外，它更短。但你需要记住，它的真正意思是“设置所有背景属性”。

【讨论】：

【解决方案9】：

background 是background-color 的快捷方式，其他一些背景相关的东西如下：

background-color
background-image
background-repeat
background-attachment
background-position

阅读以下来自 W3C 的声明：

背景 - 速记属性
为了缩短代码，它是也可以在一个单一的指定所有背景属性财产。这称为速记属性。
背景的简写属性是背景：

body {
  background: white url("img_tree.png") no-repeat right top;
}

使用速记属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position
如果缺少其中一个属性值并不重要，只要其他的都是这个顺序。

【讨论】：

【解决方案10】：

我发现你不能用背景色设置渐变。

这行得通：

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

这不是：

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

【讨论】：

【解决方案11】：

这是最好的答案。速记（背景）用于重置和 DRY（与速记结合）。

【讨论】：

【解决方案12】：

18 个色样在一个小页面上呈现 100 次的比较矩形，一次带有背景，一次带有背景色。

我重新创建了 CSS 性能实验，现在的结果明显不同。

background

Chrome 54：443 (µs/div)

Firefox 49：162 (µs/div)

边缘 10：56 (µs/div)

background-color

Chrome 54：449 (µs/div)

Firefox 49：171 (µs/div)

边缘 10：58 (µs/div)

如您所见 - 几乎没有区别。

【讨论】：

【解决方案13】：

background 是以下属性的简写：

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position

您可以详细了解每个属性here

属性顺序

在大多数浏览器实现中（我认为可能较旧的浏览器可能会出现问题），属性的顺序并不重要，除了：

background-origin 和background-clip：当这两个属性都存在时，第一个引用-origin，第二个引用-clip。

例子：
```
background: content-box green padding-box;
```
相当于：
```
background-origin: content-box;
background-color: green;
background-clip: padding-box;
```
background-size 必须始终跟在background-position 之后，并且属性必须用/ 分隔
如果background-position由两个数字组成，第一个是水平值，第二个是垂直值。

【讨论】：

【解决方案14】：

我在为 Outlook 生成电子邮件时注意到...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

【讨论】：

【解决方案15】：

一旦你明白你可以用它来玩继承，你就可以做一些非常简洁的事情。不过首先让我们从这个doc on background:了解一些东西

使用 CSS3，您可以为元素应用多个背景。这些是与您在顶部提供的第一个背景相互叠加以及后面列出的最后一个背景。只有最后一个背景可以包含背景颜色。

所以当一个人这样做时：

background: red;

他将背景颜色设置为红色，因为红色是最后列出的值。

当一个人这样做时：

background: linear-gradient(to right, grey 50%, yellow 2%) red;

红色再次成为背景色但您会看到渐变。

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

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

现在与背景颜色相同：

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

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

发生这种情况的原因是因为当我们这样做时：

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

最后一个数字设置背景颜色。

然后在我们从背景（然后我们得到渐变）或背景颜色继承之前，然后我们得到红色。

【讨论】：

【解决方案16】：

我注意到在文档中没有看到的一件事是使用 background: url("image.png")

如果找不到图像，它会发送一个 302 代码，而不是像使用上述那样被忽略

background-image: url("image.png")

【讨论】：

【解决方案17】：

有一个关于背景和背景颜色的错误

这个区别，使用背景时，有时在创建网页时在 CSS 中 background: #fff // 可以覆盖一个Mask image("top item, text or image")) 所以最好总是使用背景色为了安全使用，在您的设计中，如果它是单独的

【讨论】：

对不起，这没有意义。您可以编辑您的答案以详细说明吗？