Question

让我们说出以下代码：

<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闪耀。有没有办法说＆＃34;说＆＃34;文字div采用background-color:rgba(53, 135, 65, 0.80);，但使用白色作为背景颜色？

Answer 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>

Answer 2

如果我理解正确，这将解决问题（将div背景颜色设置为白色，将div文本颜色设置为rgba（9,7,7,2.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);
}

Answer 3

好的，如果我正确地理解了你的问题，那么你应该尝试一下，看看那是否是你正在寻找的。

＆＃13;

<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>

＆＃13;

只有背景元素已添加到您的代码中，因此文本的颜色仍然相同，但如果您愿意，可以更改它。

这就是事情：

你说了以下

这是因为绿色透过灰色div闪耀。在那儿一种方式来说＆＃34;说＆＃34;文本div采用背景颜色：rgba（53,135,65， 0.80）;但是用白色作为背景颜色？

这让我觉得你想要2种不同的背景颜色，一种是绿色（rgba（53,135,65,0.80），另一种是白色。

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

Answer 4

如果我正确地阅读了您的问题，您不希望像其他答案所暗示的那样更改文字颜色，而是防止绿色透过您的透明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>

Answer 5

试试这个

＆＃13;

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

＆＃13;

<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>

＆＃13;

HTML，CSS;如何通过覆盖div来防止颜色闪烁

5 个答案: