❶ 前端如何實現遮罩功能
前端如何實現遮罩功能
web端中經常需要讓局部區域可視，但不可點擊。
這是可以通過遮罩功能實現。
實現思路：
在上面浮動增加一層div層將下層蓋住，通過z-index實現。
❷ 前端開發 實現可滑動遮罩層，位置在底部占據總屏幕1/3，寬度充滿屏幕。
<style type="text/css">
#zhe{
width:100%;
height:245px;
background-color:red;
position:fixed;
top:410px;
left:0px;
}
</style>
</head>
<body>
<div id="zhe" class=""></div>
<img src="images/1.jpg" width="" height="" border="0" alt="">
<img src="images/2.jpg" width="" height="" border="0" alt="">
<img src="images/3.jpg" width="" height="" border="0" alt="">
<img src="images/4.jpg" width="" height="" border="0" alt="">
<img src="images/5.jpg" width="" height="" border="0" alt="">
<img src="images/6.jpg" width="" height="" border="0" alt="">
</body>
主要是給上面這個div一個固定定位fixed 就會當你下拉滾動條時 他還是固定在下面不動的
❸ 前端製作遮罩與蒙版
概念上兩者非常容易混淆，但完成的效果是一樣的，需記住哪個是無色摳取，哪個是黑色摳除。
再者還有個裁剪，只是做裁切，沒有對半透明情況的處理。
這樣一說就知道，本文閱讀起來可能是會有點亂的。
那麼前端方法中 如何實現 ，又各 有哪些應用場景 呢？
比較容易搜到的，也是用得最多的，強得一批。
現在是只有遮罩功能的， mask 指定的是下層形狀，本元素及其所有子級為上層圖案。
<small>以後的發展可能會通過 mask-composite 實現蒙版，小期待一下吧。</small>
遮罩嘛，即有色就顯示，無色則隱藏。
rgba(0,0,0,0)、tranpsarent，png 圖片中的透明 或 無色 就摳除。
mask 和 background 的設置非常類似，也可以縮寫：
mask-image / mask-repeat / mask-position / mask-size / mask-origin / mask-clip
mask-image 也和 background-image 一樣支持 url， gradient，image-set，element 等等。
舉幾個栗子：
至於剩下的 mask-mode / mask-type / mask-composite 瀏覽器支持還不太妙，暫可以不考慮。
但功能上卻是強大，需要更多了解還請自行翻閱 文檔 。
PS： 兼容性 方面雖然一片紅，IE 什麼的拋棄掉，實驗下來其實還不錯。寫上 -webkit-mask 基本都能用。
PPS：firefox 中動畫時 mask-size 小於 100% 會不顯示，但定值可以，原因不知。
個人有點莫名的習慣，不管做什麼效果，都會往 SVG 上想一想，可能源於它強大的功能吧。
相比 html+css 多了很多特性，如路徑/線條的設置/諸多濾鏡/視圖限定等；
相比 canvas 多了一些 dom 上的便捷操作，如事件。
SVG 可以用 mask 來實現 蒙版 ，用 clipPath 來實現 裁剪 （下文會講）。
區分一下，svg mask 為蒙版，白色為顯示；css mask 為遮罩，有色為顯示。
mask 蒙版內可以包裹透明圖片或文字。
但使用蒙版的元素，卻莫名不能是 image，這就很完蛋呀，有待研究。
如果 css 的 mask 適用於圖片和漸變等的話，那 background-clip:text 就適用於文字。
字面意思，將背景裁切成文字范圍。
另外，background-clip 還可以設 content-box，也是不錯的功能，
默認 padding-box，border-box 有上邊框不被修改的 BUG。
註： 兼容性 上，明文規定要加 -webkit-。順便拋棄 IE。
很多文章誤以為是 text-fill-color 實現了遮罩功能，其實是 background-clip:text 呀！
clip 在 canvas 中本來的作用是切一塊畫布獨立出來。
拿來做遮罩效果也是可以的，但並非真的遮罩，只是裁剪，因為它不是按有色無色來判斷顯示的。
還可以用 beginPath, lineTo 等線條操作來形成圖形。
註：fillRect 和 strokeRect 是無法被切出來的，要用 rect。
註：為了避免影響其他地方，用 save 和 restore 包起來就行了。
註：文字遮罩用 clip 是無法實現的。
修改 canvas 的渲染規則。比如後寫的蓋住前面的，改成後寫的放到低層之類的。
這些規則中有一個 source-in，就能實現 遮罩 （按黑白色來判斷顯隱）。
如果你用的 strokeRect 和 fillText 那繪制出來的也是相應效果喲。
如果前者是半透明的，覆蓋的後者渲染出來也會是半透明的。
如果前者是半透明的 PNG 圖片，覆蓋的後者出來的也會是半透明，強無敵。
註：globalCompositeOperation 的默認值是 source-over，用完了別忘了改回來，不然會影響後續操作。
全部規則效果一覽： https://foreverz133.github.io/demos/single/globalCompositeOperation.html
其中有一些可以拿出來提一下，挺好玩的。
source-in：交叉的部分渲染後者
destination-in：交叉的部分渲染前者
destination-out：去掉交叉的部分
destination-over：後者放至下層
主要還是以裁剪為主，裁剪當然是不會根據形狀的顏色什麼的來判斷顯隱的咯。
css 的 clip-path 是老版屬性 clip 的改良版，clip 必須絕對定位，且只有矩形還只能 px。
clip-path 則支持方形/圓形/橢圓形/多邊形，單位也更豐富。
我覺得 clip-path 和 border-radius 一樣，改個圖片或者盒子的樣式又方便又爽。
但也不一樣，因為是裁剪，像 border 呀子級內容呀什麼的也是會被剪掉的，hover 也還是原來的尺寸。
比如蓋一層鏤空的五角星顯示背景色呀，蓋一層鏤空的字呀什麼的
假 DEMO： https://foreverz133.github.io/demos/single/star.html
這應該就是名副其實的遮擋層了吧，與本文其實毫無關系。
但可能你會在你不了解 mask 或需要兼容時用到。
例子： http://www.zhangxinxu.com/wordpress/2016/03/better-black-mask-guide-overlay-method/
除此之外，radial-gradient 可以完成部分類似功能，比如圓形的鏤空，位置和大小設置相較也更方便。
shape-outside 僅能算作是高級版 float 擴展，也與本文毫無關系。
只是因為既然寫了 clip-path 那 shape-outside 就提一下，避免有理解錯誤。
註：shape-outside 得是浮動元素時才有效。
註：它能設的值和 clip-path 基本一致
它並不會改變本身什麼東西，形狀不會變，border 等也還是原來的樣子，還得結合 clip-path 來用。
它只是讓其他與其貼邊的元素有了一個不一樣的貼邊效果。
PS： 兼容性 吧，怎麼說呢，回退到方形影響應該不大。
雖然 clip-path 又不像 border-radius 可以加邊框陰影什麼的，但其實 polygon 多邊形可以有高級玩法，
比如： https://codepen.io/airen/pen/VPKQxb
文檔 顯示以後會支持 url 和 element 等，那就很方便了呀。順便再期待一下 shape-inside 的出現。
你思考一下 css 的 mask / background-clip / clip-path 和 shape-outside 的使用場景，這其實很有意思。
遮罩是有色的部分顯示圖案，蒙版是白色的部分顯示圖案，裁剪只是裁成這個形狀，三者的實際妙用在本文中並沒有深入書寫，僅算是梳理其功能和明確其區別。
還請大佬們多多分享此方面的巧妙案例咯，讓小弟也開開眼。
❹ 前端遮罩層作用
遮罩層的作用就是將層後面的內容都遮住，覆蓋全屏。