主页 / 问题 / 966307
Accepted
John
Asked:2020-04-06 23:12:42 +0000 UTC2020-04-06 23:12:42 +0000 UTC

如何正确嵌入谷歌地图作为背景[关闭]

  • 772

我想为块做背景

<div class="block">

  <div class="container">
  //content
  </div>
</div>

标签<div class="block">将显示背景，但必须在内容下方

提前致谢！

google-maps

1 个回答

  1. Best Answer

    是的，但是地图是不可点击的，如果你需要它工作，那么你需要更多

    .container {
 pointer-events: none;
}


    html,
body {
  margin: 0;
  padding: 0;
}

.block {
  position: relative;
}

.map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2;
  min-height: 250px;
  background: rgba(0, 0, 0, 0.2)
}
    <div class="block">
  <div class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d577325.3484153093!2d36.82509701532533!3d55.58152434359989!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54afc73d4b0c9%3A0x3d44d6cc5757cf4c!2z0JzQvtGB0LrQstCw!5e0!3m2!1sru!2sru!4v1554563819157!5m2!1sru!2sru"
      width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  <div class="container">
    Контент
  </div>
</div>

    • 2

相关问题