html - 图像上从上到下的线性渐变(黑色)，前景为文本(左下)

Question

线性渐变适用于图像，但文本不会出现在图像前景上。此外，渐变不应该出现在文本上。我哪里做错了？
任何帮助都感激不尽。

.glimage {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  background-image: url(/assets/img/rests/bangkok.jpg);
  height: 220px;
}

.glimage:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url(/assets/img/rests/scenery.jpg);
}
.gltext {
  position:absolute;
  color: #fff;
}

<div class="box">
  <div class="glimage">
    <div class="gltext">
      <h2>Travelling</h2> 
<p>These are texts.</p></div>
</div></div>

Answer 1

你错过了你的 z-index .高 z-index 会将它“拉得更近”。

.glimage {
  z-index: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  background-image: url(/assets/img/rests/bangkok.jpg);
  height: 220px;
}

.glimage:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url(/assets/img/rests/scenery.jpg);
}
.gltext {
  position:absolute;
  z-index: 1000;
  color: #fff;
}

<div class="box">
  <div class="glimage">
    <div class="gltext">
      <h2>Travelling</h2> 
<p>These are texts.</p></div>

</div></div>