Material Design 是 Google 设计语言的一种，旨在创造简约、鲜明和直观的移动和网页应用程序界面设计。它注重美学和动力学，同时提供了标准化的设计接口。在本篇文章中，我们将引导您如何使用 Material Design 在添加物品弹窗中实现半透明效果。
半透明背景
在 Material Design 中，半透明背景具有多种形式，例如半透明的蒙版强调并突出显示内容。您可以使用以下 CSS 代码添加半透明背景效果。
-- -------------------- ---- -------
----------- -
--------- ------
---- --
----- --
------- --
------ --
----------------- ------- -- -- -----
-------- ---
-上述代码将创建一个名为 “.background” 的 CSS 类，它将填充整个屏幕并具有 50％ 不透明度的黑色背景色。注意，position: fixed 属性将它置于屏幕顶部。
现在您可以将这个背景添加到添加物品的弹窗中。弹窗将被放置在顶层，并在弹出时创建半透明背景。
添加物品弹窗
添加物品弹窗是一种透明的、半透明的界面，可以在用户将要添加新内容时弹出。您可以使用以下 HTML 和 CSS 代码创建一个简单的添加物品弹窗。
-- -------------------- ---- -------
---- -------------------
---- -----------------
-------------
------
------ -----------------------------
------ ----------- -------------- -----------------
------ ------------------------------------
------ ----------- --------------------- ------------------------
------- -------------------------
-------
------
-------- -------------------- ---- -------
--------- -
--------- ------
---- ----
----- ----
------ ------
------- -----
---------- --------------- ------
-------- -----
----------------- -----
-
--------- -- -
----------- --
-
--------- ---- ----- -
-------- ------
------------ -----
----------- -----
-
--------- ---- ----- -
------ -----
-------- -----
---------- -----
-------------- ----
------- --- ----- -----
-------------- -----
-
--------- ---- ------ -
-------- ---- -----
----------------- --------
------ -----
------- -----
-------------- ----
---------- -----
------- --------
-您可能已经注意到，弹窗被放置在屏幕的中心位置，并用 CSS 的 transform 属性居中。这个小技巧在许多情况下都可以派上用场。
添加 JavaScript 交互
我们的弹窗看起来很完美，但是，它还不能做什么。现在我们想为这个界面添加一个开关以控制它的出现/隐藏。这需要一些 JavaScript 代码。
<button id="add-item">添加物品</button>
<div class="background" id="background"></div> <!-- 用于创建半透明背景-->
<div class="add-item" id="add-item-window">
<!-- 弹窗 HTML 和 CSS 代码 -->
</div>-- -------------------- ---- -------
--- --------- - ------------------------------------
--- ---------- - --------------------------------------
--- ------------- - -------------------------------------------
----------------------------------- -------- -- -
-- ------------
---------------------------------
------------------------------------
---
------------------------------------ -------- -- -
-- ------------
------------------------------------
---------------------------------------
---以上代码说明了添加和隐藏物品窗口的逻辑。当单击 addButton 时，将显示 background 和 addItemWindow。这需要显示它们的类 .show。另一方面，当单击 background 时，这两个元素的 .show 类将被删除，使其不可见。
总结
本文提供了一个可用的方法，以通过 Material Design 在添加物品的弹窗中添加半透明效果。通过仔细阅读本文的每一个步骤，您可以将它应用到您的项目中，实现半透明效果并增加交互体验。最后，我们希望本文对您有所帮助。
完整示例代码请访问：https://codepen.io/pen/?template=KKMRNBy
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0585848841e9894cacc91