Question

我不确定这是否可行，但我想在地图上添加半透明图层。然后在图层上放置文字。我尝试过以下方法，但是图层在地图后面而不是在图层后面，文字也是如此，我该如何解决这个问题？

/*GOOGLE MAPS*/

section#map {
  width: 100%;
  height: 250px;
}
/*layers*/

.layer {
  background-color: black;
  opacity: 0.5;
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  /*netscape*/
  filter: alpha(opacity=50);
  /*IE*/
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /*IE 8*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<section id='map'>
  <div class="layer">

    <h3 id="area">Restaurants delivering to</h3>

    <script type="text/javascript">
      // When the window has finished loading create our google map below
      google.maps.event.addDomListener(window, 'load', init);

      function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
          // How zoomed in you want the map to start at (always required)
          zoom: 11,
          // The latitude and longitude to center the map (always required)
          center: new google.maps.LatLng(40.6700, -73.9400), // New York

          // How you would like to style the map. 
          // This is where you would paste any style found on Snazzy Maps.
          styles: [{
            "featureType": "all",
            "elementType": "labels",
            "stylers": [{
              "visibility": "off"
            }]
          }, {
            "featureType": "landscape",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#f3f4f4"
            }]
          }, {
            "featureType": "landscape.man_made",
            "elementType": "geometry",
            "stylers": [{
              "weight": 0.9
            }, {
              "visibility": "off"
            }]
          }, {
            "featureType": "poi.park",
            "elementType": "geometry.fill",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#83cead"
            }]
          }, {
            "featureType": "road",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#ffffff"
            }]
          }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": [{
              "visibility": "off"
            }]
          }, {
            "featureType": "road.highway",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#fee379"
            }]
          }, {
            "featureType": "road.arterial",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#fee379"
            }]
          }, {
            "featureType": "water",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#7fc8ed"
            }]
          }]
        };

        // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using our element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);

        // Let's also add a marker while we're at it
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(40.6700, -73.9400),
          map: map,
          title: 'Snazzy!'
        });
      }
    </script>

    <!-- FLAT DESIGN MAP -->
</section>
</div>

只有地图显示，浏览器中没有其他内容。但我希望它看起来像这样。

Answer 1

如果你给你的主要部分位置相对如下，你可以给你的图层位置绝对包括顶部和左边的值，如下所示，而不是减少图层的不透明度只需在你的背景中使用rgba值 - 而不是：

**我也会将h3移出地图部分并将其放在上面。

＆＃13;

/*GOOGLE MAPS*/

section#map {
  width: 100%;
  height: 250px;
  position:relative;
  margin:auto;
}
/*layers*/

.layer {
  background-color: rgba(0,0,0,0.5);
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

h3 {
 width:100%;
 position:relative;
 z-index:999;
}

＆＃13;

<section id='map'>
  <div class="layer">

    <h3 id="area">Restaurants delivering to</h3>

    <script type="text/javascript">
      // When the window has finished loading create our google map below
      google.maps.event.addDomListener(window, 'load', init);

      function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
          // How zoomed in you want the map to start at (always required)
          zoom: 11,
          // The latitude and longitude to center the map (always required)
          center: new google.maps.LatLng(40.6700, -73.9400), // New York

          // How you would like to style the map. 
          // This is where you would paste any style found on Snazzy Maps.
          styles: [{
            "featureType": "all",
            "elementType": "labels",
            "stylers": [{
              "visibility": "off"
            }]
          }, {
            "featureType": "landscape",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#f3f4f4"
            }]
          }, {
            "featureType": "landscape.man_made",
            "elementType": "geometry",
            "stylers": [{
              "weight": 0.9
            }, {
              "visibility": "off"
            }]
          }, {
            "featureType": "poi.park",
            "elementType": "geometry.fill",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#83cead"
            }]
          }, {
            "featureType": "road",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#ffffff"
            }]
          }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": [{
              "visibility": "off"
            }]
          }, {
            "featureType": "road.highway",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#fee379"
            }]
          }, {
            "featureType": "road.arterial",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#fee379"
            }]
          }, {
            "featureType": "water",
            "elementType": "all",
            "stylers": [{
              "visibility": "on"
            }, {
              "color": "#7fc8ed"
            }]
          }]
        };

        // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using our element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);

        // Let's also add a marker while we're at it
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(40.6700, -73.9400),
          map: map,
          title: 'Snazzy!'
        });
      }
    </script>

    <!-- FLAT DESIGN MAP -->
</section>
</div>

＆＃13;

地图上的CSS-半透明层无法正常工作

1 个答案: