html - 将文本添加到褪色背景图像

Question

我正在使用包含褪色图像的 div，该 div 阻止我在图像本身上写任何文本。

我尝试添加 position: absolute;，虽然居中文本有点问题，但我没有成功。

.bg {
    width: 100%;
    height: 800px;
    background: url("https://climate.nasa.gov/assets/images_of_change/ioc_intro_image.png");
    background-size: 100% 100%;
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
}

代码片段

---

.bg {
    width: 100%;
    height: 800px;
    background: url("https://climate.nasa.gov/assets/images_of_change/ioc_intro_image.png");
    background-size: 100% 100%;
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
}

<div class="bg" data-aos="fade-up">
 <h1>
   aaaaaaaaaaaaaaaa
 </h1>
</div>

如何将文本添加到我的背景图片，以便我能够以响应方式更改文本边距？

Answer 1

尝试将您的背景 div 绝对定位并将内容带出分区。

.bg {
  width: 100%;
  height: 400px;
  background: url("https://climate.nasa.gov/assets/images_of_change/ioc_intro_image.png");
  background-size: 100% 100%;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

<div class="bg" data-aos="fade-up">
</div>
<h1>
  aaaaaaaaaaaaaaaa
</h1>