如何使用css

Question

我正在制作一个半透明的面板覆盖在我的地图上，我认为模糊其下方的地图将是一个整洁的效果。我尝试使用CSS过滤器，即filter: blur(5px);，但这只会模糊面板的内容，而不是它下面的地图。

有谁知道实现这种效果的方法？

（图片简单的div面板，没有模糊）

Answer 1

1. 将地图放在.wrapper div
中
2. 将过滤器应用于该div
3. 然后将叠加背景添加到该div的pseudo-element。

.wrapper {
  overflow: hidden;
  width: 400px;
  height: 400px;
  position: relative;
  filter: blur(5px);
}

.wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.5);
}

<!-- initilize map -->
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 40.674,
        lng: -73.945
      },
      zoom: 12,
    })
  }
</script>



<div class="wrapper">
  <div id="map" style='width: 100%; height: 100%;'></div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>

我有两个注释：

1. 此won't work on IE

2. 您的设计理念会破坏Google地图的条款和条件 隐藏谷歌徽标。如果你必须经历这一点，一定要 很好地阅读条款和条件