其實 這種代碼網(wǎng)上很多，不過都有弊端原理很簡單，就是 顯示隱藏層以及 zindex ，的控制，不過這種控制對100%高度的控制還是不夠的，樣式也不是美觀，而且不支持拖拽我這里有個代碼，你拿去研究吧 var dragDrop = functiondrag；還有一種情況是當(dāng)頁面加載時，假如數(shù)據(jù)沒有加載完成，此時為了防止用戶進(jìn)行操作，會顯示一個遮罩加載中這個操作和上面差不多，只是觸發(fā)方式不同，一個是在生命周期中觸發(fā)，一個是通過用戶點擊觸發(fā) htmlcssjsht。

實現(xiàn)圖片的透明度漸變效果，效果如下先說下我的實現(xiàn)，并沒有用什么黑科技，而是通過兩層圖層堆疊的方式來做的下面一層就是單純的 svg 圖片，上面覆蓋了一層遮罩，并設(shè)置遮罩的背景色為藍(lán)色到透明色的從左到右漸變這；實現(xiàn) 下面，我們一步步地實現(xiàn)一種較為簡潔有效的遮罩層 Step 1 首先我們要考慮定義一個遮擋瀏覽器窗口的div，考慮下面一段html+css代碼 它可以實現(xiàn)遮擋瀏覽器窗口的功能，其中幾個需要注意的css屬性分別解釋如下 1。

在文本外面使用ltdefs和ltmask來進(jìn)行包裹，這表示我們將使用文字來作為遮罩使用注意mask標(biāo)簽有一個id最后一行代碼ltuse xlinkhref=quot#knockoutquot要指向文本的ID最后，通過CSS來制作SVG文字模板遮罩效果knockout；fxml里用css樣式 fxopacity 04控制stackpane半透明 以上方法stage顯示后是半透明遮罩效果，但是我想要在stackpane中間一塊區(qū)域里放輸入對話框，結(jié)果輸入部分還是半透明的效果，還未能解決 追加換了下實現(xiàn)方式，就是；ie下面高版本的漸變又透明的才行沒法透明，可以考慮使用透明pngrgba最后面的那個1可以改為08試試看，就變成透明的了boxwidth200pxheight200pxoverflowhiddenposition relative#box spandisplay block。

效果圖如下三logo遮罩動態(tài)效果 利用webkitmask我們還可以制作炫酷的logo遮罩動畫效果，用js控制讓蒙版動起來效果圖如下實現(xiàn)代碼如下function$quotmaskquotmouseoverfunction var b=0，c=$this，d；很多文章誤以為是 textfillcolor 實現(xiàn)了遮罩功能，其實是 backgroundcliptext 呀clip 在 canvas 中本來的作用是切一塊畫布獨立出來 拿來做遮罩效果也是可以的，但并非真的遮罩，只是裁剪，因為它不是按有色無色。

div代碼 遮罩層 這個是我做的遮罩層的，和你的需求類似，可以稍作修改，實現(xiàn)你的效果，希望可以幫到你；2在html文件中輸入以下html代碼3在css文件中輸入以下css代碼4編輯完成之后，選擇格式為UTF8無 BOM模式，保存文件5在瀏覽器中打開此html文件，可以看到最終想要實現(xiàn)的遮住全屏效果；4接著添加鼠標(biāo)移動上去顯示遮罩層的腳本代碼這個js代碼用jquery來寫，方便，簡單一點，所以我們先引入jquery腳本庫5添加mouseover，mouseout事件，主要就是當(dāng)鼠標(biāo)移動到圖片容器上時，顯示遮罩層，移出時，隱藏遮罩層6；我這里怎么沒看到這個按鈕，不過按你的描述，應(yīng)該是css3 pointerevents，你看一下那個黑色層上是不是有這個樣式屬性，并且值是。

遮罩 顏色 凹陷效果14RevealTransDuration=？， Transition=？ 動態(tài)切換 切換時間 切換效果123種切換方式15ShadowColor=？， Direction=？16WaveAdd=？， Freq=？， LightStrength=？， Pha；二HTML頁面代碼如圖所示定義一個div并給出一個id屬性三使用寬度百分比后，將高度值設(shè)置為零，使用padding屬性的top或者bottom可以使用任何百分比，并使用背景色作為測試四瀏覽器運行后，效果如下如果放大或；三頁面上必須放置一個div，作為遮罩層，下面是這個遮罩層的css樣式復(fù)制代碼 代碼如下lockDiv positionabsoluteleft0top0height0width0border2 solid reddisplaytextaligncenterbackgroun。