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置于绝对位置，并将内容置于分区之外。

＆＃13;

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

＆＃13;

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

＆＃13;

添加文本到褪色的背景图像

1 个答案: