什么是半透明遮罩
半透明遮罩是 Material Design 中常见的一种 UI 元素，常常用于在弹出框、滚动的列表等场景中，营造出一种模糊、半透明的覆盖效果，使得底层内容的重要性得以凸显。一般来说，半透明遮罩可以为前景层新增一层背景色，并设置不透明度来实现。
如何实现半透明遮罩
实现半透明遮罩可以考虑各种方案，有利用 CSS 实现的方法，也有使用 JS 库的方案。下面分别介绍两种实现半透明遮罩的方式：
CSS 实现
利用 CSS 的 backdrop-filter 属性可以实现半透明遮罩的效果。backdrop-filter 属性可以为元素的后代元素创建一个视觉效果，可以与 background-color 和 opacity 属性组合使用。具体代码如下：
-- -------------------- ---- ------- ---------- --------- --------- -------- -- ---- -- ------ -- ------- -- ----- -- ----------------- ------- -- -- ----- ---------------- ----------- -
上述代码中，backdrop-filter: blur(10px) 表示将元素模糊化，适当调整 blur 值可以得到不同的模糊程度。
JS 库实现
如果采用 JS 库实现半透明遮罩，则可以选择 jQuery Modal 或者 SweetAlert2，这两个库都提供了方便的接口来实现模态框及遮罩的效果，方便开发者快速搭建网站。
以 SweetAlert2 为例，实现半透明遮罩的代码如下：
-- -------------------- ---- -------
-----------
------ ------ ---- - ---------------- ---------
---------- -
------ --------- -----------
--
---------- -
------ --------- ----------
--
----------- ------------------
--------- -
-----------------
---------------------------------------
---- ---
---------
-
--上述代码中，background 和 backdrop 分别表示背景色和背景图片，并设置不透明度。
经典案例
一个经典的案例是弹出框。当用户点击一个按钮后，弹出框会出现在页面上，此时可以为弹出框添加一个半透明遮罩，覆盖在底层主体内容上，使得弹出框成为焦点，并且使底层内容变暗，增加了弹出框的可读性。下面是弹出框代码：
-- -------------------- ---- -------
------- -------------- -----------
---- ----------------------
---- -----------------------
---- ----------------------
--------- ----------
------- -- - ----- ------- ----- --- ------ -- ----- -------
------- -------------- --------------------------------
------
-------- -------------------- ---- ------- --------------- --------- --------- -------- ---- ---- -- ------ -- ------- -- ----- -- -------- ----- ---------------- ------- ------------ ------- - ---------- --------- --------- -------- -- ---- -- ------ -- ------- -- ----- -- ----------------- ------- -- -- ----- ---------------- ----------- - --------------- --------- --------- ------ ------ ----------------- ----- -------------- ---- -------- ----- - ----------- --------- --------- ---- ----- ------ ----- -
-- -------------------- ---- ------- ----- --- - ------------------------------- ----- ----- - ----------------------------------------- ----- -------- - ------------------------------------- ----------------------------- ----------- ------------------------------ --- ---------------------------------- ----------- --------------------------------- ---
总结
半透明遮罩是 Material Design 中的一种常见组件，可以为网页增加不同的视觉层次，提高用户体验。本文介绍了两种实现半透明遮罩的方式，并通过一个弹出框的例子来演示如何使用。最后，总结一下本文内容，包括:
- 半透明遮罩的意义和作用
- CSS 和 JS 库两种实现半透明遮罩的方式的具体代码实现
- 通过一个经典的案例——弹出框，来演示如何使用
以上内容可以帮助前端开发者更好的学习和掌握 Material Design 中半透明遮罩的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469bd80968c7c53b0992c6e