background和background-color有什么区别

小卤蛋2020-03-24

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

片段1

body { background-color: blue; }

片段2

body { background: blue; }

Near阳光2020/03/24 11:29:10

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

APro2020/03/24 11:29: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));

Stafan路易2020/03/24 11:29:10

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

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

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

Tony凯2020/03/24 11:29:10

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

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

凯LEY2020/03/24 11:29:10

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

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

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

路易神奇猪猪2020/03/24 11:29:10

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

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

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

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

Gil伽罗小宇宙2020/03/24 11:29:10

比较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）

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

斯丁2020/03/24 11:29:10

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
只要其中一个属性值缺失，就没有关系。

Eva宝儿理查德2020/03/24 11:29:10

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

/*works*/
background: gray;

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

蛋蛋卡卡西2020/03/24 11:29:10

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

LGil2020/03/24 11:29:09

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

樱小胖Mandy2020/03/24 11:29:09

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

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

用于背景效果的CSS属性：

背景颜色

背景图片

背景重复

背景附件

背景位置

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

Mandy2020/03/24 11:29:09

有了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和background-color有什么区别

背景-速记属性

更多信息