div元素的顶部和底部褪色

Question

我已经能够淡化 div 的顶部，但我不能让底部也淡化。我想我可以反转我用来淡化顶部的 css，但它不起作用。

HTML：

<div class="container-city">
  <div id="gradient-top">
    <h2 style="text-align: center; padding-top: 60px;">LOCATIONS</h2>
  </div>

  <div id="gradient-bottom">
  </div>
</div>

CSS

.container-city {
  background-image: url("img/1652.png");
  width: 100%;
}

#gradient-top {
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}

#gradient-bottom {
  background: -moz-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
  background: -webkit-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
  background: linear-gradient(to top, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}

问题：

有没有更简单的方法通过淡化顶部和底部来完成此操作？

当前结果：

Answer 1

似乎最简单的解决方案是在background-image 中添加一个带有多个停靠点的linear-gradient 并将标题垂直和水平居中以获得您正在寻找的效果（您还可以向渐变颜色添加百分比值停下来调整它的褪色方式）。类似于以下内容：

.container-background {
  background-image: linear-gradient(#fff, transparent, #fff), url('http://via.placeholder.com/200x800/f0f000/fff?text=');
  width: 100%;
}

.container-title {
  text-align: center;
  margin: 0 auto;
  padding: 60px 0;
}

<div class="container-background">
    <h2 class="container-title">TITLE</h2>
</div>