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

编辑：

我有一张由html创建的传单地图：

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

我如何制作地图作为巨无霸的背景

编辑：

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

---

现在它得到了解决方案：我用javascript设置mapDiv的高度和边缘底部，并添加position:relative

JS

CSS

---

您是否已尝试将

id=“map”

添加到

jumbotron

div？…以及地图上的详细信息？我猜是一些js/jquery脚本？@webeno问题是首先显示地图，然后显示其余文本。我正在添加其余的代码。请在添加代码时告诉我，这样很难帮助您…@webeno done。我会设法找出JSFIDLE，同时也把它放在那里。

#map { height: 180px; }

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

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;

}