Html CSS 颜色 vs. 背景颜色 vs. 背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39033070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS color vs. background-color vs. background?
提问by Doggo
In HTML when do I use color, and what is the difference between background-color and also the background tag?
在 HTML 中我什么时候使用颜色，背景颜色和背景标签有什么区别？
What are the differences?
有什么区别？
回答by Thomas Byy
coloris referring to the text color in that element.
color指的是该元素中的文本颜色。
background-colorrefers to the background color
background-color指的是背景色
backgroundis shorthand to combine many background tags into one line.
background是将许多背景标签组合成一行的简写。
background: #ffffff url("img_tree.png") no-repeat right top;
Combines color, image and background image properties in the one line instead of typing our each style individually.
在一行中组合颜色、图像和背景图像属性，而不是单独键入我们的每种样式。
回答by Juan Pablo
I will give you a example using this html element:
我会给你一个使用这个 html 元素的例子：
<span class="value"> This is my text </span>
<span class="value"> This is my text </span>
.value { color: red, background-color: black}
.value { color: red, background-color: black}
The CSS color is used to change the text color of a html element. In this example "This is my text" would be red. The CSS background-color is used to change the background color so in this case you would get a black box with red text inside it. Finally the background is used to set all the background properties in one declaration. For example:
CSS 颜色用于更改 html 元素的文本颜色。在这个例子中，“这是我的文字”将是红色的。CSS background-color 用于更改背景颜色，因此在这种情况下，您会得到一个带有红色文本的黑框。最后，背景用于在一个声明中设置所有背景属性。例如：
background: #00ff00 url("smiley.gif") no-repeat fixed center;
background: #00ff00 url("smiley.gif") no-repeat fixed center;
This changes the background color, adds the image "smiley.gif" to the background and it centers the image, it doesnt repeat the image if it has the space.
这会更改背景颜色，将图像“smiley.gif”添加到背景并将图像居中，如果有空间则不会重复图像。
回答by Steven Spungin
It is true that backgroundgives more options versus background-color. But if you only need to set background color, they are exactly the same, and each will override the other as seen in the snippet.
确实，background与background-color. 但是如果您只需要设置背景颜色，它们是完全相同的，并且每个都将覆盖另一个，如代码段中所示。
background: yellow;
background-color: yellow;
.bc {
background: yellow;
background-color: green;
}
.bc2 {
background-color: green;
background: yellow;
}<div class='bc'>
bc { background:yellow; background-color:green; }
</div>
<div class='bc2'>
bc { background-color:green; background:yellow; }
</div>