如何在单张地图上添加渐变？ [英] how to add a gradient over a leaflet map?

问题描述

我想在单张地图上添加一个渐变，它将从白色渐变为透明，并部分遮掩。

使用CSS作为背景的常规渐变，只有当地图重新加载时，才会显示渐变。所以我试着把梯度放在'前景'使用从这个问题接受的答案：

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> 

解决方案

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.

这篇关于如何在单张地图上添加渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！