Question

正如您在以下自解释示例中所看到的，background-clip属性不适用于#map。

<html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<style>
#rectangle {
  display: block;
  margin: 0px auto;
  width: 400px;
  height: 100px;
  padding: 20px;
  border: solid;
  background: orange;
  background-clip: content-box;
}

#map {
  margin: 0px auto;
  width: 400px;
  height: 100px;
  padding: 20px;
  border: solid;
  background-clip: content-box;
}
</style>
    </head>
    <body>
        <div id="rectangle">Blablabla</div>
        <br />
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
    </body>
</html>

有类似的东西吗？如何将地图限制为内容框？

非常感谢！

Answer 1

您可以将地图<div>放入另一个容器<div>，使其看起来与第一个框类似。

CSS：

#map {
  width: 100%;
  height: 100%;
}

#mapcontainer {
  margin: 0px auto;
  width: 400px;
  height: 100px;
  padding: 20px;
  border: solid;
}

HTML：

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

如何将地图限制为内容框？

1 个答案: