CSS颜色 vs. 背景颜色 vs. 背景？

Question

在 HTML 中，我什么时候使用 color 属性？background-color 和 background 标签有什么区别？

这两者有什么不同？

- Doggo

---

欢迎，Ivo。阅读如何提问 - 首先像@Barthy建议的那样进行搜索和研究。 - micstr

@Barthy 这正是它被投票降低的原因。它显示了缺乏研究。 - Dalija Prasnikar

仅仅因为某个东西在其他地方有记录并不意味着你不能在 Stack Overflow 上询问相关内容。 - Dave Cousineau

@DaveCousineau 这个问题被投票降低了分数，因为Dalija Prasnikar说它显示了缺乏资源，并且在(http://stackoverflow.com/help/how-to-ask)中指出你应该展示一些研究。 - Doggo

这是该问题的最佳搜索结果，我正在使用DuckDuckGo。因此，只需几秒钟的互联网搜索即可将某人带到这里，这并不是一件坏事。 - Matt

请参考https://dev59.com/OWkv5IYBdhLWcg3w_lzE，了解bg和bg-color之间的区别。 - TylerH

Answer 1

color指的是该元素中文本的颜色。

background-color指的是背景颜色。

background是将多个背景标签组合成一行的速记方式。

background: #ffffff url("img_tree.png") no-repeat right top;

将颜色、图像和背景图像属性结合在一行中，而不是逐个输入每个样式。

w3schools

- MomasVII

---

老师的职责是告诉我们该如何做，并回答阅读书籍的人的疑问：对简单的问题给出简单的答案。但并非每个人都能支付得起好老师。对我而言，重要的是学习，但我们并不是每天都有时间和精力去深入探究隐藏的答案。如果您划分得当，那么这个网站就没有太多的价值。 - Rodrigo

Answer 2

快速回答：

• Color = 文字颜色
• Background-color = 背景颜色
• Background = 提供了设置颜色、图像等的可能性...

在这里可以找到关于此的优秀教程：这里

- Dries Peeters

Answer 3

我将使用这个html元素来举例:

<span class="value"> 这是我的文本 </span>

.value { color: red, background-color: black}

CSS的color属性用于改变html元素的文本颜色。在这个例子中，“这是我的文本”会是红色的。CSS的background-color属性用于改变背景颜色，所以在这种情况下，你会得到一个黑色的框，里面有红色的文本。最后，background属性被用来在一个声明中设置所有的背景属性。例如:

background: #00ff00 url("smiley.gif") no-repeat fixed center;

这将改变背景颜色，添加图像“smiley.gif”作为背景，并将其居中显示，如果有空间，则不重复显示图像。

- Juan Pablo

Answer 4

确实，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>

- Steven Spungin

Answer 5

关于这两个CSS属性的一个重要方面是，背景颜色不会覆盖使用以下代码设置的图像或渐变色：

background:url('https://example.com/image.jpg');

或者

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%); 

如果您想将图像的背景更改为颜色，则需要使用`background`属性。

- Ifbi dev

---

非常感谢您提供的覆盖提示。我遇到了一个情况，因为其他地方调用了渐变，导致我的背景无法正常工作。 - Chukwuemeka Inya

Answer 6

color：用于为标签内的文本添加颜色。

color: blue;

background-color: 用于为标签内的内容添加背景颜色。

background-color : red;

background：用于向标签内的内容添加不同类型的背景属性名称。

background : red url('image.png') fixed repeat cover;

- abhishek singh

Answer 7

让我给你一些定义和例子。

1. "color" 属性指定文本的颜色。

p {
  color: blue;
}

2. background-color 属性设置元素的背景颜色。

div {
  background-color: lightgray;
}

background属性是一个简写属性，允许您在一条声明中设置多个与背景相关的属性。这些属性包括background-color、background-image、background-repeat、background-position等。

而不是这样做： source

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

你可以做：

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

- Guzman Ojero