其实 这种代码网上很多，不过都有弊端原理很简单，就是 显示隐藏层以及 zindex ，的控制，不过这种控制对100%高度的控制还是不够的，样式也不是美观，而且不支持拖拽我这里有个代码，你拿去研究吧 var dragDrop = functiondrag；还有一种情况是当页面加载时，假如数据没有加载完成，此时为了防止用户进行操作，会显示一个遮罩加载中这个操作和上面差不多，只是触发方式不同，一个是在生命周期中触发，一个是通过用户点击触发 htmlcssjsht。

实现图片的透明度渐变效果，效果如下先说下我的实现，并没有用什么黑科技，而是通过两层图层堆叠的方式来做的下面一层就是单纯的 svg 图片，上面覆盖了一层遮罩，并设置遮罩的背景色为蓝色到透明色的从左到右渐变这；实现 下面，我们一步步地实现一种较为简洁有效的遮罩层 Step 1 首先我们要考虑定义一个遮挡浏览器窗口的div，考虑下面一段html+css代码 它可以实现遮挡浏览器窗口的功能，其中几个需要注意的css属性分别解释如下 1。

在文本外面使用ltdefs和ltmask来进行包裹，这表示我们将使用文字来作为遮罩使用注意mask标签有一个id最后一行代码ltuse xlinkhref=quot#knockoutquot要指向文本的ID最后，通过CSS来制作SVG文字模板遮罩效果knockout；fxml里用css样式 fxopacity 04控制stackpane半透明 以上方法stage显示后是半透明遮罩效果，但是我想要在stackpane中间一块区域里放输入对话框，结果输入部分还是半透明的效果，还未能解决 追加换了下实现方式，就是；ie下面高版本的渐变又透明的才行没法透明，可以考虑使用透明pngrgba最后面的那个1可以改为08试试看，就变成透明的了boxwidth200pxheight200pxoverflowhiddenposition relative#box spandisplay block。

效果图如下三logo遮罩动态效果 利用webkitmask我们还可以制作炫酷的logo遮罩动画效果，用js控制让蒙版动起来效果图如下实现代码如下function$quotmaskquotmouseoverfunction var b=0，c=$this，d；很多文章误以为是 textfillcolor 实现了遮罩功能，其实是 backgroundcliptext 呀clip 在 canvas 中本来的作用是切一块画布独立出来 拿来做遮罩效果也是可以的，但并非真的遮罩，只是裁剪，因为它不是按有色无色。

div代码 遮罩层 这个是我做的遮罩层的，和你的需求类似，可以稍作修改，实现你的效果，希望可以帮到你；2在html文件中输入以下html代码3在css文件中输入以下css代码4编辑完成之后，选择格式为UTF8无 BOM模式，保存文件5在浏览器中打开此html文件，可以看到最终想要实现的遮住全屏效果；4接着添加鼠标移动上去显示遮罩层的脚本代码这个js代码用jquery来写，方便，简单一点，所以我们先引入jquery脚本库5添加mouseover，mouseout事件，主要就是当鼠标移动到图片容器上时，显示遮罩层，移出时，隐藏遮罩层6；我这里怎么没看到这个按钮，不过按你的描述，应该是css3 pointerevents，你看一下那个黑色层上是不是有这个样式属性，并且值是。

遮罩 颜色 凹陷效果14RevealTransDuration=？， Transition=？ 动态切换 切换时间 切换效果123种切换方式15ShadowColor=？， Direction=？16WaveAdd=？， Freq=？， LightStrength=？， Pha；二HTML页面代码如图所示定义一个div并给出一个id属性三使用宽度百分比后，将高度值设置为零，使用padding属性的top或者bottom可以使用任何百分比，并使用背景色作为测试四浏览器运行后，效果如下如果放大或；三页面上必须放置一个div，作为遮罩层，下面是这个遮罩层的css样式复制代码 代码如下lockDiv positionabsoluteleft0top0height0width0border2 solid reddisplaytextaligncenterbackgroun。