HTML 文本不显示为白色

Question

我有一个带有 CSS 的白色 html 文本。我还将不透明度设置为 0.5，但这不应该改变字体颜色。它应该保持白色。

在不移除不透明度或背景颜色的情况下，是否有解决此问题的方法？

body {
  background: green;
}

.second-b {
  background-image: url(images/town.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.color-box {
  width: 100%;
  height: 300px;
  background-color: red;
  opacity: 0.5;
  line-height: 300px;
  text-align: center;
}

.color-box-content {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color: white;
  font-size: 22px;
}

<div class="second-b">
  <div class="color-box">
    <div class="color-box-content">Lorem ipsum</div>
  </div>
</div>

Answer 1

如果你在一个元素上使用不透明度，它会影响它里面的所有元素，您只能在背景颜色上使用不透明度

background-color: rgba(255, 0, 0, 0.5);

查看代码片段:

body {
  background: green;
}

.second-b {
  background-image: url(images/town.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.color-box {
  width: 100%;
  height: 300px;
  background-color: rgba(255, 0, 0, 0.5);
  line-height: 300px;
  text-align: center;
}

.color-box-content {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color: white;
  font-size: 22px;
}

<div class="second-b">
  <div class="color-box">
    <div class="color-box-content">Lorem ipsum</div>
  </div>
</div>