如何更改 WASM 应用加载页面的背景颜色?

问题描述 投票:0回答:1

我正在开发 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" >

-> 页面是白色的,然后是红色的,然后加载主页,仍然不是我想要实现的。

我在这里缺少什么?

c# razor blazor
1个回答
0
投票

.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;
}
© www.soinside.com 2019 - 2024. All rights reserved.