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怎么实现镂空遮盖层效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。