HTML 文本不显示为白色

Question

我有 html 文本，用 css 颜色为白色。我还将不透明度设置为 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);

看代码片段：

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