Question

我有一张由html：

创建的传单地图

<div id="map"></div>

和一个超大屏幕

<div class="jumbotron">
    <h1>Example Unit</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>

具有以下样式

.jumbotron {
  color: white;
  text-shadow: #444 0 1px 1px;
  background:transparent;
  background-size: 100%;
  margin-bottom:0; 
}

如何将地图作为jumbotron的背景？

编辑：

css

#map { height: 180px; }

js

var map = L.map('map').setView([38.578, -77.243], 13);

L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

Answer 1

现在它得到了解决方案：我用javascript设置mapDiv的height和marginBottom并添加position：relative;

JS

var map = L.map('map').setView([38.578, -77.243], 13);

L.tileLayer('http://{s}.tiles.mapbox.com/v3/mapid/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);

var height=document.querySelector('.jumbotron').offsetHeight;
document.getElementById('map').style.height=height+"px";
document.getElementById('map').style.marginBottom="-"+height+"px";

CSS

html,body {
    height:100%;
}

.jumbotron {
          color: white;
          text-shadow: #444 0 1px 1px;
          background:transparent;
          background-size: 100%;
          margin-bottom:0; 
             overflow: hidden;
    position: relative;
        }
        .navbar {margin-bottom:0; }
        #map { height: 0px; 
margin:-30px -30px -0px -30px;
    z-index:0;

}
.jumbotron h1,.jumbotron p
{
    z-index:100;
    position:relative;

}

如何添加地图作为jumbotron的背景

1 个答案: