如何在传单地图上添加渐变？

Question

我正在尝试在传单地图上添加渐变，该渐变将从白色渐变为透明并部分遮盖它。

使用带有 CSS 的常规渐变作为背景使渐变仅在地图重新加载时出现。所以我尝试使用这个问题的公认答案将渐变放在“前景”中：Is there a foreground equivalent to background-image in css?

这仍然不起作用 - 地图仍然位于它上面。谁能想到一种方法来做到这一点？谢谢。

<style>
      #map-id {
        height: 100%;
      width: 100%;
      position: absolute;
      }
      html,body{margin: 0; padding: 0}

      #map-id:before {
      position: absolute;
      content: '';
      height: 100%;
      width: 100%;
        background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      pointer-events: none;
      }


    </style>


    <div id="map-id">
      <script type="text/javascript" src="{% static "js/map.js" %}"></script>
    </div> 

Answer 1

你应该在前面的内容块中添加一个 z-index 属性

供参考的代码笔：http://codepen.io/hkadyanji/pen/bwNLKK

z-index: 999; /* adding this worked for me */

截图：

编辑

添加了文本覆盖实现。