部分全透明遮罩层

young.li 发布于2019-08-30 12:50 / 2668人阅读

摘要：腾讯微云，在新用户刚进入网站时的提示。第一眼看到这样的部分全透明遮罩的效果，感觉实现的方式有使用图片，在相应的位置进行挖空全透明处理。

腾讯微云，在新用户刚进入网站时的提示。
第一眼看到这样的部分全透明遮罩的效果，感觉实现的方式有：

1.使用图片，在相应的位置进行挖空全透明处理。但是这样如果有多处提示，就得使用多张图片

2.或者像腾讯微云自己的实现方式，垒积木似的一块一块拼接，这样做缺点也很明显

在看到一篇博客上的思路，如果把白色区域看成div，黑色半透明部分看成div的各个border，这样事情就变得简单得多：

代码实现




  
  背景遮罩
  


  这是一个背景遮罩

实现效果：

（这样我们只需要改变四面border的值，就能够改变border的位置，改变div的width 或者height就可以改变白色区域的形状。但是这样的缺点是只能形成有限的全透明形状）

云服务器 GPU云服务器遮罩层遮罩层html div遮罩层 javascript遮罩层

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115098.html

mask-image的应用

摘要：大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。利用能做出一些不错的效果，比如。想到用这个属性正合适，于是要来了心型图片，拿到设计师导出的文件，用压缩下得到一个。遮罩层，如果学过Flash的同学应该都听过，跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞，我...

HollisChuang 2019-08-30 11:19 评论0 收藏0
弹出遮罩层后，如何禁止底层页面的滚动

摘要：但是，我们会发现，当弹出遮罩层后，底层的内容也是可以滚动，显然这不是我们想要的效果，而这个问题就是小萌最近开发项目时遇到的问题。弹窗是一种常见的交互方式，而蒙层则是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，我们会发现，当弹出遮罩层后，底层body的内容也是可以滚动，显然这不是我们想要的效果，而这个问题就是小萌最近开发项目时遇到的问题。一个小程序的项目，是用MPV...

betacat 2019-04-23 13:24 评论0 收藏0
css揭秘笔记——用户体验

摘要：使用透明边框增大热区面积，但和并不能阻止背景扩大到边框下面模拟原有边框自定义复选框思路使用与复选框绑定的的伪元素模拟一个勾选框，可以自定义其样式，将原来的复选框隐藏。这种方式被称为复选框。选用合适的鼠标光标 css3提供了一大批内建光标(cursor)其中某些光标很突出，因为只需要花费极少的代码，就可以迅速地提升大量网页应用的可用性。比如禁用（not-allowed），比如，公共触摸...

huaixiaoz 2019-08-29 13:49 评论0 收藏0
简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)

摘要：当弹框弹出时原页面内容不能滚动，即将样式设为原页面的内容就不会动了当弹框关闭后再将样式改为默认的中的写一个函数，再在弹框的中调用函数。弹出弹框效果展示实现原理 html结构比较简单，即：遮罩层弹框先写覆盖显示窗口的遮罩层div.box，因为要在整个窗口显示固定，所以position要设为fixed，background设为灰色半透明，由于要遮住整个显示屏，...

番茄西红柿 2019-04-23 11:51 评论0 收藏0
前端入门小结

摘要：实现了搜索这一功能，接下来就是要把这一部分嵌入到一个平台，因此我开始接触编程以及前端。之前我对前端几乎没有什么了解，因此这一周除了体检被检查出来早搏参加入学典礼之外，就是在琢磨，，了，并结合需求开发了网站的一部分。今年暑假大部分时间是在要学校，前一阶段一直在学习Scala和理解Spark，但是苦于没有实际上手的项目，尽管看了不少论文和书，但不敢说自己理解的有多深刻，所以我打算暂时搁置...

chengtao1633 2019-08-21 10:41 评论0 收藏0