css - 背景和背景颜色有什么区别

Question

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

片段#1

body { background-color: blue; }

片段#2

body { background: blue; }

score 290 · Accepted Answer

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

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

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

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

score 170 · Accepted Answer

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

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

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

如下：

background: black;

因此，所有参数 ( background-image, background-position, background-repeat) 将重置为其默认值。

score 98 · Accepted Answer

关于CSS 性能：

background与background-color：

比较 18 种颜色样本在页面上以小矩形呈现 100 次，一次带有背景，一次带有背景色。

背景与背景颜色

虽然这些数字来自单个页面重新加载，但随着后续刷新渲染时间发生了变化，但每次的百分比差异基本相同。

在 Safari 7.0.1 中使用背景而不是背景颜色时，这节省了近 42.6 毫秒，几乎快了两倍。Chrome 33 似乎也差不多。

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

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

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

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

score 28 · Accepted Answer

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;

更多信息

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

score 8 · Accepted Answer

区别之一：

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

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

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

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

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

score 3 · Accepted Answer

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

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

用于背景效果的 CSS 属性：

背景颜色

背景图片

背景重复

背景附件

背景位置

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

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

background

铬 54：443（微秒/格）

Firefox 49：162（微秒/格）

边沿10：56（微秒/格）

background-color

铬 54：449（微秒/格）

Firefox 49：171（微秒/格）

边沿10：58（微秒/格）

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

score 2 · Accepted Answer

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
是否缺少其中一个属性值并不重要，只要其他属性值按此顺序排列即可。

score 2 · Accepted Answer

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

这有效：

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

score 1 · Accepted Answer

1

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

于 2016-04-01T15:37:28.023 回答

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

/*works*/
background: gray;

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

score 0 · Accepted Answer

一旦你明白你可以用它来玩继承，你就可以做一些非常简洁的事情。但是首先让我们从这个文档的背景中了解一些东西：

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

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

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

score -2 · Accepted Answer

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

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

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

score -2 · Accepted Answer

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

不同之处在于，在使用背景时，有时在 CSS 背景中创建网页时：#fff // 可以覆盖掩码图像块（“顶部项目，文本或图像”））所以最好总是使用背景 -安全使用的颜色，在您的设计中，如果它是单独的

css - 背景和背景颜色有什么区别

17 回答 17

更多信息

背景 - 速记属性

Related

Reference