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

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

屏幕截图：

修改

添加了文字叠加实施。