本文小編為大家詳細(xì)介紹“HTML怎么實現(xiàn)鏤空遮蓋層效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“HTML怎么實現(xiàn)鏤空遮蓋層效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出臨西免費做網(wǎng)站回饋大家。

首先，先用樣式實現(xiàn)內(nèi)容上覆蓋一層半透明遮蓋，其中某個區(qū)域鏤空。

DIV拼接

最原始的方法，圍著鏤空區(qū)域拼接4個div，拼接的方式很多，比如上面的圖中用了不同顏色來表示4個div。

優(yōu)點是兼容性好，缺點是要用多個DOM元素去構(gòu)造遮蓋層，計算麻煩，并且鏤空區(qū)域只能是矩形。

border

盒模型包括了content和border，可以用content表示鏤空區(qū)域，用border表示遮蓋層，并且通過border-width來定位鏤空區(qū)域的位置。和上面的方法有相似之處。

用這種方法需要計算，有些情況還需要用到JS，并且鏤空區(qū)域只能是矩形（當(dāng)然在不使用漸變的情況下）。

outline

outline不占據(jù)空間，不影響本身元素和其他元素，可以通過對它設(shè)置足夠大的值來作為遮蓋層。

比上面一種方法好的地方是元素設(shè)置border-radius是有效的，所以鏤空區(qū)域可以是圓角矩形、橢圓、圓形等。

mix-blend-mode

利用混合模式，可以使元素與父元素疊加部分透明，擺脫了單個元素限制，使鏤空區(qū)域可以更自由，做更復(fù)雜的圖形，比如對話氣泡框。

很多場景下，還需要對鏤空區(qū)域下的DOM進(jìn)行點擊、選擇等操作。

用DIV拼接的方法，鏤空區(qū)域本來就是空的，所以可以直接對下面的DOM操作。

其他方法，因為有真實DOM覆蓋在內(nèi)容上面，所以就要用到pointer-events:none，這樣鼠標(biāo)事件可以“穿透”該元素作用于下面的內(nèi)容上。

大多數(shù)場景需要阻止操作遮蓋部分下面的DOM，只對鏤空部分進(jìn)行“穿透”，所以不能直接對鏤空遮蓋層設(shè)置pointer-events:none，應(yīng)該在鼠標(biāo)移動到鏤空區(qū)域時設(shè)置pointer-events:none，離開鏤空區(qū)域設(shè)置pointer-events:auto。注意的是不能在鏤空遮蓋層上監(jiān)聽mosuemove，因為當(dāng)它被設(shè)置為pointer-events:none時，就無法監(jiān)聽了。

對于outline和box-shadow，因為它們本身就不占據(jù)空間，鼠標(biāo)事件對它們是沒有效果的，自帶“穿透”效果，所以除了要對鏤空遮罩層設(shè)置pointer-events:none，還需要再覆蓋一層透明的遮蓋層，同樣監(jiān)聽父級容器的mousemove事件，動態(tài)的對該透明層設(shè)置pointer-events

混合模式的方法，原以為通過監(jiān)聽鏤空元素的mouseenter和mouseleave來控制pointer-events就可以了，但同樣當(dāng)pointer-events:none時無法監(jiān)聽鼠標(biāo)事件，所以也只能通過鼠標(biāo)坐標(biāo)來判斷。

某些場景下，如仿Snipaste截圖效果，需要對遮蓋層下的所有元素監(jiān)聽鼠標(biāo)進(jìn)出事件，這時候?qū)φ麄€鏤空遮罩層設(shè)置pointer-events:none就行了。

讀到這里，這篇“HTML怎么實現(xiàn)鏤空遮蓋層效果”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。