【问题标题】:CSS color vs. background-color vs. background?CSS颜色与背景颜色与背景?
【发布时间】:2021-08-22 13:14:25
【问题描述】:

在 HTML 中什么时候使用颜色,背景颜色和背景标签有什么区别?

有什么区别?

【问题讨论】:

  • 欢迎伊沃。阅读How to ask - 按照@Barthy 的建议首先搜索和研究
  • @Barthy 这正是它被否决的原因。这表明缺乏研究。
  • 仅仅因为某些东西记录在其他地方并不意味着您不能在 SO 上询问它
  • @DaveCousineau 正如 Dalija Prasnikar 所说,它被否决了,因为它表明缺乏救援,并且在 (stackoverflow.com/help/how-to-ask) 中它说你应该进行一些研究。
  • 这是该问题的最高结果,我正在使用duckduckgo。所以是的,几秒钟的互联网搜索就会有人来到这里,这不是一件坏事。

标签: html css


【解决方案1】:

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

background-color指背景色

background 是将多个背景标签组合成一行的简写。

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

将颜色、图像和背景图像属性组合在一行中,而不是单独输入每种样式。

w3schools

【讨论】:

  • 一位老师会告诉我们它是如何完成的,并解决阅读书籍的人的疑问:对简单的问题给出简单的答案。但并不是每个人都能花钱请到好老师。对我来说重要的是学习,并不是每天我们都有时间和精力去挖掘隐藏的答案。如果你的部门是对的,那么这个网站就没有什么价值了。
【解决方案2】:

我会给你一个使用这个html元素的例子:

<span class="value"> This is my text </span>

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

CSS 颜色用于更改 html 元素的文本颜色。在此示例中,“这是我的文本”将是红色的。 CSS background-color 用于更改背景颜色,因此在这种情况下,您将看到一个带有红色文本的黑框。最后,背景用于在一个声明中设置所有背景属性。例如:

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

这会改变背景颜色,将图像“smiley.gif”添加到背景中并将图像居中,如果有空间则不会重复图像。

【讨论】:

    【解决方案3】:

    这两个 css 属性的重要一点是,背景颜色不会覆盖使用此设置的图像或渐变:

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

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

    如果您尝试将背景从图像更改为颜色,则必须使用背景属性。

    【讨论】:

    • 非常感谢您的覆盖提示。遇到了我的背景由于其他地方的渐变调用而无法正常工作的情况。
    【解决方案4】:

    快速回答

    • 颜色 = 文本颜色
    • Background-color = 背景颜色
    • Background = 让您可以设置颜色、图像等...

    这方面的优秀教程可以在here找到

    【讨论】:

      【解决方案5】:

      确实background 提供了比background-color 更多的选择。但是如果你只需要设置背景颜色,它们是完全一样的,并且每个都会覆盖另一个,就像在 sn-p 中看到的那样。

      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>

      【讨论】:

        【解决方案6】:

        color:用于为Tag内的Text添加颜色。

        color: blue;
        

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

        background-color : red;
        

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

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

        【讨论】: