リーフレットマップにグラデーションを追加する方法は？

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

あなたはコンテンツブロック

参照用codepen前で​​のz-indexプロパティを追加する必要があります：http://codepen.io/hkadyanji/pen/bwNLKK

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

スクリーンショット：

EDIT

を

テキストオーバーレイ実装が追加されました。