Question

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

Snippet＃1

body { background-color: blue; }

Snippet＃2

body { background: blue; }

Answer 1

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

的简写

背景色
  背景图片
  背景位置
  背景重复
  背景附件
  背景夹
  背景出身
  背景大小

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

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

Answer 2

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

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

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

如下：

background: black;

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

Answer 3

关于 CSS效果：

background vs background-color ：

在页面上渲染100次的18种颜色样本的比较小矩形，一次使用背景，一次使用背景颜色。

Background vs background-color

虽然这些数字来自单页重新加载，但后续   刷新渲染时间已更改，但百分比差异为   每次都基本相同。

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

这真的让我感到震惊，因为最长的时间有两个原因：


我通常总是争论CSS属性的明确性，尤其是背景，因为它可能会对你的特性造成不利影响。

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

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

Answer 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

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

Answer 5

其中一个不同之处：

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

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

然后你不能用“background-color”属性覆盖它。

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

没有区别。两者都会以同样的方式运作。

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

用于背景效果的CSS属性：



background-color

background-image

background-repeat

background-attachment

背景位置

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

Answer 9

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

Answer 10

在页面上渲染100次的18种颜色样本的比较小矩形，一次带背景，一次带背景色。

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

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

Answer 11

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
如果缺少其中一个属性值，则无关紧要因为其他的按顺序排列。

Answer 12

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

/*works*/
background: gray;

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

Answer 13

一旦你明白你可以玩这种继承，你可以做一些非常整洁的东西。不过，首先让我们了解一下doc on background:

的内容

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

所以当一个人做的时候：

background: red;

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

当人们这样做时：

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

红色再次是背景颜色但是你会看到一个渐变。

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

现在背景颜色相同：

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

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

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

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

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

Answer 14

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

这有效：

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

Answer 15

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

Answer 16

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

这个的区别，在使用背景时，有时候在创建网页时在CSS中 background：#fff //可以覆盖一个Mask图像块（“top item，text或image”））所以总是使用背景颜色更好安全使用，在您的设计中如果是个人

Answer 17

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

如上图所示的短手，如果没有找到图像则发送302代码而不是被忽略，就像你使用

一样

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

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

17 个答案:

More info

背景 - 速记属性