背景描述
最近項目中要使用到地圖有可能基於開源地圖也有可能使用自己用geoserver搭建的地圖服務器，在前端這塊有個簡單的需求，在地圖上放置一個蒙層，起到一個初步美化效果。對於初入前端江湖不久的我，一時沒有什么想法，可能基礎要好好補補，添加上蒙層，這好處理，就是兩個div重疊嘛，但是下面的地圖還能點擊、放大縮小等各種操作嗎？
解決方法
想了許久，終於找到了解決方案，css有個屬性，pointer-events，直接看官網介紹：
給出實現示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main {
width: 400px;
height: 400px;
border: 1px solid red;
}
.front {
width: 350px;
height: 350px;
background-color: green;
float: left;
position: absolute;
text-align: center;
line-height: 300px;
opacity: 0.6;
}
.back {
width: 360px;
height: 360px;
background-color: rosybrown;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="front">
我在前面層
</div>
<div class="back">
我在后面層
<a href="https://www.css88.com/book/css/properties/user-interface/pointer-events.htm">點擊我，我要飛</a>
</div>
</div>
</body>
</html>
執行結果：
- 總結: css奇巧淫技很多，需要多多學習實踐啊