来自MDN：
在 Chrome 47 及更高版本中，会为网页显示启动画面 从主屏幕启动的应用程序。这个闪屏是 使用 Web 应用清单中的属性自动生成，特别是：
name、background_color，以及icons array中的图标 最接近设备的 128dpi。
我想知道是否可以使用全屏背景图像代替生成的背景？
【问题讨论】：
您可能需要查看有关 Adding a Splash Screen for Installed Web Apps in Chrome 47 的文档。
如果您想确保始终显示图标，请考虑 48dp 是我们将显示的最小图像尺寸，如果您采用当前支持的最大密度显示 (4x)，则 48 * 4 = 192px。这很幸运，因为我们需要 192px 的图像才能添加到主屏幕才能工作！耶。因此，我建议始终将 192px 作为最小尺寸图标，并在 256px、384px 和 512px 创建 3 个其他版本。但是，如果您想确保用户不会为启动画面下载太多数据，尤其是在低密度设备上，那么您可以降低一点，Chrome 会尝试获取最合适的图像。
表示当前支持的最大密度显示为 4x of 48dp。
您可以为此提交feature request。
【讨论】：
初始屏幕上背景图像的替代选项。 （没有 hacks）这不是一个简单或优雅的解决方案，但话说回来，渐进式 Web 应用程序也不是。
您可以简单地让您的初始屏幕加载，然后当您的 URL 最终加载时，您可以使用 Javascript 在加载文档的其余部分之前触发一个事件，以设置您自己的自定义“模拟”初始屏幕样式。尽管这对最终用户来说可能有点“hacky”，但它实际上只是一种解决方法，不会以任何方式影响清单的工作方式。如果你走这条路，我建议使用媒体查询来测试display-mode。这样，您的 CSS 将知道您的应用程序何时处于某种模式，然后您可以相应地设置样式。
你的 CSS styles.css:
/* the wrapper will be visible later after the document loads */
#wrapper { display:none; }
/*
Using a media query to test for the display-mode of your application
*/
@media all and (display-mode: fullscreen) {
body {
margin: 0;
border: 5px solid black;
}
}
#splash_screen {
/* all your splash screen styles */
}
确保在清单中声明显示模式：
“显示”：“独立”
您的 HTML；
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript">
/* with setTimeout you have control over how long the
splash screen sticks because the document will load first. */
setTimeout( function() {
var wrapper= document.getElementById("wrapper") ;
var splash_screen = document.getElementById("splash_screen") ;
document.body.removeChild(splash_screen) ;
wrapper.style.display = "initial" ;
} , 2000 ) ;
</script>
</head>
<body>
<div id="splash_screen"></div>
<div id="wrapper">
/* the rest of your content */
</div>
</body>
</html>
CSS display-mode 上的 MDN 文档。 manifest display 上的 MDN 文档。
我自己试图找到一种在初始屏幕上使用背景图像的方法，这就是我最终来到这里的原因。在我的追求中，我想出了模拟闪屏的想法。请注意，我没有测试过这段代码。
【讨论】：
z-index 属性添加到初始屏幕，并将一个属性添加到包装器，因为包装器自然会有更高的 z-index，因为它是其父级的最后一个子级.