web前端入門到實戰(zhàn)：鏤空遮蓋層效果的研究

1、web前端入門到實戰(zhàn)：鏤空遮蓋層效果的研究上圖是qq截圖挑選區(qū)域時的畫面，可以看到除了中間框選的部分，其他區(qū)域被一層半透亮層籠罩（backdrop），這種效果不知道專業(yè)叫法，這里稱呼它鏤空遮蓋層。實際業(yè)務需求中倒是不多見，比較頻繁的是頁面上的新手引導，視頻網站的關燈模式等用到這種效果，通用容易的做法是將內容元素的z-index設置大于遮蓋層的，使該元素顯示在遮蓋層上面。接下來共享下其他的辦法，可能對某些特別場景實用。以下介紹的辦法有：通過多個div拼接，單個div利用css的屬性border, outline, box-shadow和混合模式mix-blend-mode來實現，下面分離從視覺和

2、動作來解釋。視覺首先，先用樣式實現內容上籠罩一層半透亮遮蓋，其中某個區(qū)域鏤空。div拼接最原始的辦法，繞著鏤空區(qū)域拼接4個div，拼接的方式無數，比如上面的圖中用了不同色彩來表示4個div。.item-1, .item-2, .item-3, .item-4 position: absolute;.item-1 top: 0; left: 0;background: rgba(0, 0, 0, 0.5);width: 450; height: 100px;.item-2 top: 0; left: 450; right: 0;height: 300px;background: rgba(0,

3、0, 0, 0.5);.item-3 top: 300px; left: 150px; bottom: 0; right: 0;background: rgba(0, 0, 0, 0.5);.item-4 top:100px; left: 0; bottom: 0;width: 150px;background: rgba(0, 0, 0, 0.5);優(yōu)點是兼容性好，缺點是要用多個dom元素去構造遮蓋層，計算棘手，并且鏤空區(qū)域只能是矩形。border盒模型包括了content和border，可以用content表示鏤空區(qū)域，用border表示遮蓋層，并且通過border-width來定位鏤空區(qū)

4、域的位置。和上面的辦法有相像之處。.rect-border position: fixed;top: 0; left: 0;width: 300px;height: 200px;border-style: solid;border-color: rgba(0, 0, 0, 0.5);border-top-width: 100px;border-right-width: calc(100vw - 450px);border-bottom-width: calc(100vh - 300px);border-left-width: 150px;用這種辦法需要計算，有些狀況還需要用到js，并且鏤空區(qū)域

5、只能是矩形（固然在不用法漸變的狀況下）。outlineoutline不占領空間，不影響本身元素和其他元素，可以通過對它設置足夠大的值來作為遮蓋層。.rect-outline position: absolute;left: 150px;top: 100px;width: 300px;height: 200px;outline: 3000px solid rgba(0, 0, 0, 0.5);優(yōu)點容易便利，但鏤空區(qū)域同樣只能是矩形。box-shadow與outline類似，box-shadow同樣不影響元素的大小位置。.rect-shadow position: absolute;left: 1

6、50px;top: 100px;width: 300px;height: 200px;border-radius: 10px;box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);比上面一種辦法好的地方是元素設置border-radius是有效的，所以鏤空區(qū)域可以是圓角矩形、橢圓、圓形等。mix-blend-mode利用混合模式，可以使元素與父元素疊加部分透亮，掙脫了單個元素限制，使鏤空區(qū)域可以更自由，做更復雜的圖形，比如對話氣泡框。.overlay position: absolute;top: 0; right: 0; bottom: 0; left: 0

7、;z-index: 99999;background-color: rgba(0, 0, 0, 0.5);mix-blend-mode: hard-light;pointer-events: auto;.spoltlight position: absolute;left: 150px;top: 100px;width: 300px;height: 200px;border-radius: 10px;background-color: gray;.spoltlight:after content: ""position: absolute;top: 100%

8、;right: 50px;border: 15px solid transparent;border-top-color: gray;無數場景下，還需要對鏤空區(qū)域下的dom舉行點擊、挑選等操作。用div拼接的辦法，鏤空區(qū)域原來就是空的，所以可以挺直對下面的dom操作。其他辦法，由于有真切dom籠罩在內容上面，所以就要用到pointer-events:none，這樣鼠標大事可以穿透該元素作用于下面的內容上。大多數場景需要阻擋操作遮蓋部分下面的dom，只對鏤空部分舉行穿透，所以不能挺直對鏤空遮蓋層設置pointer-events:none，應當在鼠標移動到鏤空區(qū)域時設置pointer-events

9、:none，離開鏤空區(qū)域設置pointer-events:auto。注重的是不能在鏤空遮蓋層上監(jiān)聽mosuemove，由于當它被設置為pointer-events:none時，就無法監(jiān)聽了。對于outline和box-shadow，由于它們本身就不占領空間，鼠標大事對它們是沒有效果的，自帶穿透效果，所以除了要對鏤空遮罩層設置pointer-events:none，還需要再籠罩一層透亮的遮蓋層，同樣監(jiān)聽父級容器的mousemove大事，動態(tài)的對該透亮層設置pointer-events混合模式的辦法，原以為通過監(jiān)聽鏤空元素的mouseenter和mouseleave來控制pointer-events就可以