Css 的 Blazor WASM 问题

Posted 2023-03-27

【中文标题】Css 的 Blazor WASM 问题

【英文标题】：Blazor WASM problems with css

【发布时间】：2022-01-11 18:22:32

【问题描述】：

由于某种原因，我的 Blazor WASM 项目无法正确渲染视频文件。当我运行我的项目时，视频标签的 CSS 不适用。

这是我的视频 html 标签：

<header>
   <div class="overlay"></div>

   <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="/videos/background.mp4" type="video/mp4"/>
   </video>
</header>

视频标签的 CSS 样式：

header 
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;

header video 
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

【问题讨论】：

css 在 component.razor.css 中？还是 wwwroot 中的一般 css 文件？

@fingers10 是的，css 在 component.razor.css 文件中。

您是否在index.html - <link href="YOURPROJECTNAME.styles.css" rel="stylesheet"> 中添加了对以下样式表的引用？

不知何故问题得到了解决，我认为是因为新的 VS 2022 更新或者我将视频 CSS 移到了单独的 .css 文件中。不过感谢您的帮助！

【参考方案1】：

问题已解决。我不是 100 我是怎么做到的，但很可能是因为我将视频 CSS 代码移动到另一个文件并在 index.html 文件中引用了它。此外，还有一个新的 VS 2022 更新，也可能解决了这个问题。