background和background-color有什么区别

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

片段1

body { background-color: blue; }

片段2

body { background: blue; }

假定它们是两个不同的属性，在您的特定示例中，结果没有差异，因为background实际上是

背景色
背景图像
背景位置
背景重复
背景附件
背景剪辑
背景起源
背景大小

因此，除了之外background-color，background您还可以使用快捷方式添加一个或多个值，而无需重复任何其他 background-*属性。

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

background将取代所有之前的background-color，background-image等规格。这基本上是简写，但也需要重新设置。

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

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

如下所示：

background: black;

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

关于CSS性能：

backgroundvs background-color：

比较18个颜色样本在页面上以小矩形呈现100次，一次具有背景，一次具有background-color。

尽管这些数字来自一次页面重新加载，但随后的刷新使渲染时间发生了变化，但每次的百分比差异基本相同。

在Safari 7.0.1中使用背景而不是背景颜色时，这节省了将近42.6ms，几乎是原来的两倍。Chrome 33看起来差不多。

老实说，这让我震惊，因为最长的时间有两个原因：

• 通常，我通常会主张CSS属性的显式性，尤其是在背景中，因为它会在以后影响特定性。
• 我以为，当浏览器看到时background: #000;，他们真的看到了background: #000 none no-repeat top center;。我在这里没有资源链接，但我记得在某处读过此书。

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

有了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;

更多信息

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

区别之一：

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

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

那么您将无法使用“ background-color”属性来覆盖它。

但是，如果您使用背景来应用颜色，则该颜色与背景颜色相同，可以被覆盖。

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

他们都是一样的。有多种背景选择器（即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;

区别在于background速记属性设置了几个与背景相关的属性。它集所有这些，即使你只指定例如颜色值，自那时以来，其他属性都设置为初始值，例如background-image到none。

这并不意味着它将始终覆盖这些属性的任何其他设置。这取决于根据通常被普遍误解的规则的级联。

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

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

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

用于背景效果的CSS属性：

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

Background属性包括所有这些属性，您只需将它们写成一行即可。

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

比较18个颜色样本在页面上以小矩形呈现100次，一次具有背景，一次具有background-color。

我重新创建了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）

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

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

只要其中一个属性值缺失，这两个属性值都没有关系。

我发现您无法使用背景色设置渐变。

这有效：

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));

background 是以下项的简写属性：

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

您可以在此处详细了解每个属性

属性顺序

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

• 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由两个数字组成，则第一个为水平值，第二个为垂直值。

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

/*works*/
background: gray;

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

一旦您了解可以使用继承功能，就可以做一些漂亮的事情。但是首先让我们从背景文档中了解一些内容：

使用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;

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

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

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

如上所示，如果找不到图片，它会发送302代码，而不是像您使用时那样被忽略

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

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

区别在于，使用背景时，有时是在CSS背景中创建网页时：#fff //可以跳过Mask图片块（“顶部项，文本或图片”）），因此最好始终使用background-安全使用的颜色，在您的设计中（如果有的话）