div元素的顶部和底部褪色

Question

我已经能够淡化div的顶部，但是我也无法淡化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

最简单的解决方案似乎是在linear-gradient上添加带有多个停靠点的background-image并将标题垂直和水平居中以得到您想要的效果（您也可以添加百分比值渐变色停止调整其淡入淡出）。类似于以下内容：

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