CSS：背景不透明度显示在文本上[重复]答案

【问题标题】：CSS : Background opacity is showing on text [duplicate]CSS：背景不透明度显示在文本上[重复]
【发布时间】：2019-02-01 23:18:24
【问题描述】：

以这段代码为例

#backgroundimage {
  background: url("https://www.solidbackgrounds.com/images/640x480/640x480-aero-solid-color-background.jpg");
  height: 50px
}

#container {
  background-color: #4C4C4C;
  opacity: 0.5;
}

#text {
  color: #ffffff;
  opacity: 1;
}

<div id="backgroundimage">
  <div id="container">
    <p id="text">
      Some text here
    </p>
  </div>
</div>

我想让文本颜色为白色，同时保持背景图像和容器不透明度不变。

【问题讨论】：

标签： html css opacity

【解决方案1】：

看看下面的例子。而不是opacity 使用rgba。根据docs：

不透明度适用于整个元素，包括其内容，即使该值不被子元素继承。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们彼此之间具有不同的不透明度。

#backgroundimage {
  background: url("https://www.solidbackgrounds.com/images/640x480/640x480-aero-solid-color-background.jpg");
  height: 500px
}

#container {
  background-color: rgba(76,76,76,.5);
}

#text {
  color: #ffffff;
}

<div id="backgroundimage">
  <div id="container">
    <p id="text">
      Some text here
    </p>
  </div>
</div>

【讨论】：

非常感谢它的帮助
您的代码使用 rgb 而不是 rgba。
这是您问题的正确答案，别忘了关闭问题并选择这个作为正确答案
为什么要标记为重复然后回答？
@TemaniAfif 根据时间戳，答案出现在标志之前

【解决方案2】：

将背景图片 (640x480-aero-solid-color-background.jpg) 设为透明并将其保存为 .png 或 .gif 格式。

从“#container”类中移除“opacity: 0.5”，从“#text”类中移除“opacity: 1”

【讨论】：

【解决方案3】：

当您设置元素的opacity 时，它会影响其子元素（如果您设置子元素的opacity，它不能覆盖父元素的opacity。

您需要做的不是设置元素的opacity，而是仅将不透明度设置为背景 - 使用rgba。

#backgroundimage {
  background: url("https://www.solidbackgrounds.com/images/640x480/640x480-aero-solid-color-background.jpg");
  height: 500px
}

#container {
  background-color: rgba(76, 76, 76, 0.5); /* #4C4C4C;*/
  /*opacity: 0.5;*/
}

#text {
  color: #ffffff;
  opacity: 1;
}

<div id="backgroundimage">
  <div id="container">
    <p id="text">
      Some text here
    </p>
  </div>
</div>

【讨论】：