我正在开发 WASM 独立应用程序,只是尝试更改加载页面的颜色。默认情况下它是白色的。
这是我尝试过的(在 Index.html 中):
<body>
<div style="background-color: red" id="app">
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
-> 页面保持白色,直到加载主页。
我尝试的第二件事(与上面相同的代码,仅在此处向正文添加样式属性):
<body style="background-color: red" >
-> 页面是白色的,然后是红色的,然后加载主页,仍然不是我想要实现的。
我在这里缺少什么?
.NET 8 Blazor WebAssembly 独立应用程序 项目模板在
index.html
中使用以下 HTML 标记:
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
页面加载时,Blazor 框架会从 DOM 中删除
svg.loading-progress
元素。如果您仍然具有相同的 HTML 标记,则此 CSS 代码将仅在 body
元素存在时更改 svg
背景:
body:has(#app > .loading-progress) {
background-color: yellow;
}