html - 淡化 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>