在图像上叠加颜色后如何在文本上设置所需的颜色？ [复制]答案

【问题标题】：How to set a desire color on text after overlaying color over an image? [duplicate]在图像上叠加颜色后如何在文本上设置所需的颜色？ [复制]
【发布时间】：2021-06-11 11:43:11
【问题描述】：

我已经在背景图像上设置了一个覆盖颜色，然后文本颜色已经改变。我将文本颜色设置为白色，但叠加后颜色发生了变化。

代码：

body {
  background: url(./survey-form-background.jpeg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
  text-align: center;
  color: white;
  font-family: 'Poppins', sans-serif;
}

.container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(68, 28, 179, 0.753);
  z-index: 2;
  width: 100%;
  height: 100%;
}

<div class="container">
  <h1 class="heading">freeCodeCamp Survey Form</h1>
  <h3 class="sub-heading"><em>Thank you for taking the time to help us improve the platform</em></h3>
</div>

图片：

我想要“白色”作为整个页面的文本颜色。我该怎么做。

请帮帮我。

谢谢。

【问题讨论】：

问题是：.container::after { z-index: 2; } 它被逐层放置在文本元素之上。
@tacoshy 是的，你是对的。我明白了，我已经发布了答案。谢谢。

标签： html css image

【解决方案1】：

解决这个问题的最好方法，首先是不要使用伪元素。您可以在背景图像之前使用线性渐变直接为其着色，如下例所示：

body { background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(./survey-form-background.jpeg) no-repeat center center fixed; }

body {
  background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
  text-align: center;
  color: white;
  font-family: 'Poppins', sans-serif;
}

<div class="container">
  <h1 class="heading">freeCodeCamp Survey Form</h1>
  <h3 class="sub-heading"><em>Thank you for taking the time to help us improve the platform</em></h3>
</div>

【讨论】：

【解决方案2】：

我得到了解决方案。

替换

.container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(68, 28, 179, 0.753);
  z-index: 2;
  width: 100%;
  height: 100%;
}

使用以下代码：

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(68, 28, 179, 0.753);
    z-index: -1;
    width: 100%;
    height: 100%;
}

【讨论】：