在 Material Design 的设计中，全屏背景是非常常见的设计元素，可用于增加页面的视觉吸引力。如果您正在开发一个 Material Design 风格的网站或应用，您可能需要了解如何实现全屏幕背景的方式。
实现方式
1. 使用 CSS3
CSS3 只需要几行代码就可以实现全屏背景。
body {
background: url(bg.jpg) center center no-repeat fixed;
background-size: cover;
}或者使用渐变背景：
body {
background: linear-gradient(to bottom right, #ec008c, #fc6767, #ffba70);
}使用 CSS3 的优点在于它简单易懂，无需引用额外的 JavaScript 库或插件。另外，它的性能也非常高效，因为浏览器可以很好地处理这些命令。
2. 使用 jQuery 插件
可以使用一些 jQuery 插件，如 fullPage.js 或 Vegas 来实现全屏幕背景。
-- -------------------- ---- ------- ---- -------- --- ---- -- --- ---- ---------------- ----------- ------ ------ ---- ---------------- ----------- ------ ------ ---- --- --- --- ---------- --- ----------------------------- ------------------------ ---------- --- ----------------------------- ------------------------ ---------- -----
-- -------------------- ---- -------
-- -------- --- ----------
---------------------------- -
-------------------------
-------------- ----------- ---------- ---------- ---------- --------
----------- -----
------------------- --------
------------------- --------- --- -------- --- -------- --- -------- --- -------- ----
---------------- ----
--------------- ----
---
---使用 jQuery 插件的优点是它们可以提供更多功能，如支持响应式设计、提供导航栏等。缺点是您必须引用额外的第三方库或插件，这可能会对性能产生一些影响。
结论
以上这些方式是您可以使用的几种实现全屏幕背景的方法。无论您选择哪种方式，都应该考虑到性能和易于维护性。简单地使用 CSS3 可能更加高效，但如果您需要更多的功能和控制，那么选择适当的 jQuery 插件可能更好。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------
------ ----------------
---- -
----------- ----------- ------ ------ --------- ------
---------------- ------
------- --
-------- --
-
-- -
------ -----
---------- -----
----------- -------
----------- -----
-
--------
------- -----------------------------------------------------------
------- -------------------------------------------------------
----- ---------------- --------------- ------------------------------------------------
-------
------
----------------
---- --------------
---- ----------------
----------- ------
------
---- ----------------
----------- ------
------
---- ----------------
----------- ------
------
---- ----------------
----------- ------
------
------
------- -----------------------
---------------------------- -
--------------------------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704f9c6d91dce0dc8511edc