分享更有价值
被信任是一种快乐

HTML怎么实现镂空遮盖层效果

文章页正文上

本文小编为大家详细介绍“HTML怎么实现镂空遮盖层效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML怎么实现镂空遮盖层效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
  首先,先用样式实现内容上覆盖一层半透明遮盖,其中某个区域镂空。
  DIV拼接
  最原始的方法,围着镂空区域拼接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, 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);
  }
  
  优点是兼容性好,缺点是要用多个DOM元素去构造遮盖层,计算麻烦,并且镂空区域只能是矩形。
  border
  盒模型包括了content和border,可以用content表示镂空区域,用border表示遮盖层,并且通过border-width来定位镂空区域的位置。和上面的方法有相似之处。
  
  
  
  
  

  .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,并且镂空区域只能是矩形(当然在不使用渐变的情况下)。
  outline
  outline不占据空间,不影响本身元素和其他元素,可以通过对它设置足够大的值来作为遮盖层。
  
  
  
  
  

  .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同样不影响元素的大小位置。
  
  
  
  
  

  .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);
  }
  
  比上面一种方法好的地方是元素设置border-radius是有效的,所以镂空区域可以是圆角矩形、椭圆、圆形等。
  mix-blend-mode
  利用混合模式,可以使元素与父元素叠加部分透明,摆脱了单个元素限制,使镂空区域可以更自由,做更复杂的图形,比如对话气泡框。
  
  
  
  
  
  
  
  

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

相关推荐: javascript中float指的是什么

这篇文章主要介绍“javascript中float指的是什么”,在日常操作中,相信很多人在javascript中float指的是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript中float指的是什么”的疑惑…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册