HTML、CSS；如何防止颜色通过覆盖 div 闪烁答案

【问题标题】：HTML, CSS; How to prevent color shining through overlaying divsHTML、CSS；如何防止颜色通过覆盖 div 闪烁
【发布时间】：2017-06-27 11:41:04
【问题描述】：

假设我有以下代码：

<html>
<head>
<style>
html    {
    background-color:rgba(53, 135, 65, 0.80);
}
div {
    background-color:rgba(9, 7, 7, 0.23);
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

文本div 的背景颜色为深绿色，尽管背景颜色为灰色。您可以通过删除 html 的背景颜色来检查这一点。

这是因为绿色通过灰色 div 发光。有没有办法“说”文本div 取background-color:rgba(53, 135, 65, 0.80); 但使用白色作为背景色？

【问题讨论】：

如果您将background-color:rgba(9, 7, 7, 0.23); 更改为background-color: rgba(255, 255, 255, 0.23);，这就是您要寻找的结果吗？
如果我理解正确，应该这样做 color:rgba(53, 135, 65, 0.80);background-color:#fffff;
在灰色 div 上添加一个白色背景 div。

标签： html css colors

【解决方案1】：

回答你的第二个问题

<html>
<head>
<style>
body    {
    background-color:rgba(53, 135, 65, 0.80);
}
div {
    color:rgba(53, 135, 65, 0.80);
    background-color:white;

}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

【讨论】：

我看了"Is there a way to "say" the text div take background-color:rgba(53, 135, 65, 0.80); but use white as background color?" 所以白色背景色应该应用到div标签而不是body标签上。

【解决方案2】：

如果我理解正确，这将起到作用（将 div 背景颜色设置为白色，将 div 文本颜色设置为 rgba(9, 7, 7, 0.23);)

https://jsfiddle.net/Lsjo988z/4/

html:

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

css:

html {
  background-color:rgba(53, 135, 65, 0.80);
}
div {
  background-color:#fff;
  color:rgba(9, 7, 7, 0.23);
}

【讨论】：

【解决方案3】：

好的，如果我正确理解了你的问题，那么你应该试试这个，看看是否是你要找的。p>

<html>
<head>
  <style>
  body    {
      background-color:rgba(53, 135, 65, 0.80);
  }
  div {
      color:rgba(53, 135, 65, 0.80);
      background: linear-gradient(rgba(53, 135, 65, 0.80), rgba(53, 135, 65, 0.80)),
                linear-gradient(white, white);
  }
  </style>
</head>
<body>
  <div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</body>
</html>

您的代码中仅添加了背景元素，因此文本的颜色仍然相同，但可以根据需要更改。

事情是这样的：

你说了以下

这是因为绿色通过灰色 div 发光。有没有一种“说”文本 div 的方法采用 background-color:rgba(53, 135, 65, 0.80);但是使用白色作为背景色？

这让我觉得你想要将 2 种背景颜色作为 2 个不同的图层，一种是绿色（rgba(53, 135, 65, 0.80)，另一种是白色。

如果这不是你的意思，请给我们更多信息（也许你应该画出你想要的结果）。

【讨论】：

【解决方案4】：

试试这个

html    {
    background-color:rgba(53, 135, 65, 0.80);
}
div {
    background-color:rgba(9, 7, 7, 0.23);
}

<div style="background-color:white;">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

【讨论】：

【解决方案5】：

如果我正确阅读了您的问题，您不想像其他答案所暗示的那样更改文本颜色，而是要防止绿色透过透明的div 发光，同时仍然利用 alpha 值以创建较浅的颜色。您可以按照一位评论者的建议进行操作，并使用不透明的颜色来实现相同的最终目标。或者你可以使用包装器div 来完成你想要的。

如果您用另一个包装器 div 包装透明的 div 并将其设为白色背景，它将阻止绿色渗出。您必须将 display 属性设置为 inline-block 以“收缩包裹”子元素。

html {
  background-color: rgba(53, 135, 65, 0.80);;
}

#wrapper {
  display: inline-block;
  background-color: white;
}

#inner {
  background-color: rgba(9, 7, 7, 0.23);
}

<div id="wrapper">
  <div id="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

【讨论】：