HTML怎么實現鏤空遮蓋層效果

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

　　首先，先用樣式實現內容上覆蓋一層半透明遮蓋，其中某個區域鏤空。

　　DIV拼接

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

　　<div class="box">

　　<div class="text"></div>

　　<div class="item-1"></div>

　　<div class="item-2"></div>

　　<div class="item-3"></div>

　　<div class="item-4"></div>

　　</div>

　　<style>

　　.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, 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);

　　}

　　</style>

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

　　border

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

　　<div class="box">

　　<div class="text"></div>

　　<div class="rect-border"></div>

　　</div>

　　<style>

　　.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;

　　}

　　</style>

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

　　outline

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

　　<div class="box">

　　<div class="text"></div>

　　<div class="rect-outline"></div>

　　</div>

　　<style>

　　.rect-outline {

　　position: absolute;

　　left: 150px;

　　top: 100px;

　　width: 300px;

　　height: 200px;

　　outline: 3000px solid rgba(0, 0, 0, 0.5);

　　}

　　優點簡單方便，但鏤空區域同樣只能是矩形。

　　box-shadow

　　與outline類似，box-shadow同樣不影響元素的大小位置。

　　<div class="box">

　　<div class="text"></div>

　　<div class="rect-shadow"></div>

　　</div>

　　<style>

　　.rect-shadow {

　　position: absolute;

　　left: 150px;

　　top: 100px;

　　width: 300px;

　　height: 200px;

　　border-radius: 10px;

　　box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);

　　}

　　</style>

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

　　mix-blend-mode

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

　　<div class="box">

　　<div class="text"></div>

　　<div class="overlay">

　　<div class="spoltlight">

　　</div>

　　</div>

　　</div>

　　<style>

　　.overlay {

　　position: absolute;

　　top: 0; right: 0; bottom: 0; left: 0;

　　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%;

　　right: 50px;

　　border: 15px solid transparent;

　　border-top-color: gray;

　　}

　　</style>

　　很多場景下，還需要對鏤空區域下的DOM進行點擊、選擇等操作。

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

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

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

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

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

　　某些場景下，如仿Snipaste截圖效果，需要對遮蓋層下的所有元素監聽鼠標進出事件，這時候對整個鏤空遮罩層設置pointer-events:none就行了。

讀到這里，這篇“HTML怎么實現鏤空遮蓋層效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。