Html 淡入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>

问题：

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

有没有一种更简单的方法可以通过淡化顶部和底部来实现这一点

当前结果：

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

---

最简单的解决方案似乎是向背景图像添加带有多个停止点的

线性渐变

，并将标题垂直和水平居中，以获得您想要的效果（您还可以向渐变色停止点添加百分比值，以调整其淡出方式）。如下所示：

。容器背景{
背景图像：线性渐变（#fff，透明，#fff），url（'http://via.placeholder.com/200x800/f0f000/fff?text=');
宽度：100%；
}
.货柜名称{
文本对齐：居中；
保证金：0自动；
填充：60px0；
}

标题

仅供参考，您实际上可以将它们组合成一个元素。@jhpratt感谢您的提示，他想出了如何将

线性渐变

和

背景图像

组合成同一个元素（包括

线性渐变

之前的

url

是我第一次错过的内容）。编辑我的答案以反映您的评论。