how to add a gradient over a leaflet map?

问题

I'm trying to add a gradient over a leaflet map that will fade from white to transparent and partially obscure it.

Using a regular gradient with CSS as a background makes the gradient appear only when the map is reloading. So I tried putting the gradient in the 'foreground' using the accepted answer from this question: Is there a foreground equivalent to background-image in css?

This still doesn't work - the map is still sitting on top of it. Can anyone think of a way to do this? thanks.

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

回答1:

You should add a z-index property in the before content block

A codepen for reference: http://codepen.io/hkadyanji/pen/bwNLKK

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

Screenshot:

EDIT

Added the text overlay implementation.

来源：https://stackoverflow.com/questions/39337423/how-to-add-a-gradient-over-a-leaflet-map