背景和背景颜色有什么区别？
使用background和background-color指定背景颜色有什么区别？
片段＃1
body { background-color: blue; }
片段＃2
body { background: blue; }
假设这些是两个不同的属性，在具体的例子中，结果没有什么区别，因为background实际上是一个捷径
背景颜色
背景图
背景位置
背景重复
背景附件
背景素材
背景起源
背景大小
因此，除了background-color之外，还可以使用background快捷方式添加一个或多个值，而不必多次重复任何其他background-*属性。
select哪一个基本上取决于你，但它也可能取决于你的风格声明的具体条件（例如，如果你需要从父元素inheritance其他相关的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 ）都会重置为默认值。
关于CSS性能 ：
background与background-color ：
比较18个颜色样本，在一个页面上呈现100次小矩形，一次背景 ，一次背景色 。
虽然这些数字来自单个页面重新加载，随后刷新渲染时间改变，但百分比差异基本上每次都是相同的。
在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-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/
没有区别。 两者将以相同的方式工作。
CSS背景属性用于定义元素的背景效果。
用于背景效果的CSS属性：
- 背景颜色
- 背景图
- 背景重复
- 背景附件
- 背景位置
背景属性包括所有这些属性，你可以只写一行。
他们都是一样的。 有多个背景select器（即background-color ， background-image ， background-position ），你可以通过更简单的backgroundselect器或更具体的访问它们。 例如：
background: blue url(/myImage.jpg) no-repeat;
要么
background-color: blue; background-image: url(/myImage.jpg); background-repeat: no-repeat;
不同的是， background速记属性设置了几个与背景有关的属性。 它将它们全部设置好，即使你只指定了一个颜色值，那么其他属性也会被设置为初始值，例如background-image为none 。
这并不意味着它总是会覆盖这些属性的任何其他设置。 这取决于按照通常的级联，一般被误解的规则。
在实践中，速记往往比较安全。 这是一个预防措施（不完整，但有用），以防意外从另一个样式表中获取一些意想不到的背景属性，如背景图像。 此外，它更短。 但是你需要记住，它确实意味着“设置所有的背景属性”。
这是最好的答案。 速记（背景）是用于复位和DRY（与longhand结合）。
比较18个颜色样本，在一个页面上呈现100次小矩形，一次背景，一次背景色。
我重新创build了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只要其中一个属性值是不存在的，只要其他属性是这样的。
我注意到当生成Outlook的电子邮件…
/*works*/ background: gray; /*does not work*/ background-color: gray;
一旦你明白你可以用inheritance玩这个，你可以做一些漂亮的东西。 但是，首先让我们从背景中理解这个文档中的一些东西
使用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>
有一个关于背景和背景颜色的错误
不同的是，在使用背景的时候，有时候当你在CSS背景中创build一个网页时：#fff //可以在一个Mask图像块（“top item，text or image”）上），所以最好总是使用background-颜色为安全使用，在您的devise，如果它的个人
有一件事我注意到，我没有在文档中看到使用background: url("image.png")
像上面这样的短手如果图像没有find它发送一个302代码，而不是被忽略就像它是如果你使用
background-image: url("image.png")
