background和background-color的区别是什么

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

片段# 1

body { background-color: blue; }

段# 2

body { background: blue; }
153622 次浏览
小开

两者将以相同的方式工作。

CSS背景属性用于定义的背景效果 一个元素。< / p >

用于背景效果的CSS属性:

  • 背景颜色
  • 背景图像
  • 平铺方式
  • background-attachment
  • 背景位置

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

小开
最佳答案

假设这是两个不同的属性，在你的特定示例中，结果没有区别，因为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将取代之前所有的background-color， background-image等规范。它基本上是一种速记，但也是重置。

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

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

以下是:

background: black;

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

小开

使用background，你可以设置所有background属性，比如:

  • background-color
  • background-image < br >
  • background-repeat < br >
    • <李> background-position < br > 等。 < / >强

使用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-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: url('Image Path') no-repeat;

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

但是如果你使用背景来应用颜色，它和background-color是一样的，并且可以被覆盖。

http://jsfiddle.net/Z57Za/11/和http://jsfiddle.net/Z57Za/12/

小开

区别在于background速记属性设置了几个与背景相关的属性。它会设置所有属性，即使你只指定一个颜色值，因为其他属性会被设置为它们的初始值，例如background-image到none。

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

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

小开
我注意到一件事，我在文档中没有看到使用 background: url("image.png") < / p >

像上面这样的简写，如果图像没有找到，它会发送一个302代码，而不是像你使用的那样被忽略

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

关于CSS性能:

background vs background-color:

在一个页面上渲染100次的18个色板的比较 矩形，一次用背景，一次用背景颜色

Background vs Background -color

而这些数字是从单页重载，与后续 刷新渲染时间改变了，但是百分比的差异是 基本上每次都是一样的

这节省了近42.6毫秒，几乎是原来的两倍，当使用 在Safari 7.0.1中使用background-color代替background-color。Chrome 33

说实话，这让我很震惊，因为在很长一段时间里，有两个原因:

  • 我通常总是主张CSS属性的显式性，尤其是背景属性，因为它可能会对特异性产生不利影响。
  • 我认为当浏览器看到background: #000;时，他们真正看到的是background: #000 none no-repeat top center;。我这里没有资源链接，但我记得在某处读过这篇文章。

裁判: https://github.com/mdo/css-perf#background-vs-background-color

小开

我注意到，当为Outlook生成电子邮件时……

/*works*/
background: gray;


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

这是最好的答案。速记(背景)是为了重置和干燥(与手写结合)。

小开
在一个页面上渲染100次的18个色板的比较 矩形，一次带有背景，一次带有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)

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

小开

你可以做一些非常巧妙的事情一旦你理解了你可以利用继承。然而，首先让我们从这个背景资料:中理解一些东西

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

现在对background-color做同样的事情:

    .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继承之前(然后我们得到渐变)或者背景颜色，然后我们得到红色。

小开

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

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

阅读下面来自W3C的声明:

背景-速记属性

缩短代码，它是 也可以指定所有的背景属性在一个单一 财产。

background的简写属性是background:

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

当使用速记属性时，属性值的顺序是:

background-color
background-image
background-repeat
background-attachment
background-position
如果其中一个属性值缺失，这并不重要，只要

小开

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

这个的差值， 当使用后台时，有时当你创建网页时 在CSS中 background: #fff //可以覆盖蒙版图像块(“顶部项目，文本或图像”)) 所以最好总是使用背景色 为了安全起见，在你的设计中，如果它的个体

小开

我发现你不能用background-color设置渐变。

如此:

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 must always follow background-position and the properties must be separated by /

  • if background-position is composed by two numbers, the first one is the horizontal value and the second the vertical value.


提交答案