正文 

当前位置： 首页 > 知识 >

Css 的 Blazor WASM 问题

     2023-03-27     47

关键词：

【中文标题】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 - &lt;link href="YOURPROJECTNAME.styles.css" rel="stylesheet"&gt; 中添加了对以下样式表的引用？ 不知何故问题得到了解决，我认为是因为新的 VS 2022 更新或者我将视频 CSS 移到了单独的 .css 文件中。不过感谢您的帮助！ 【参考方案1】：

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

【讨论】：

具有 ReportViewer 导出功能的 Blazor (Wasm)

】具有ReportViewer导出功能的Blazor(Wasm)【英文标题】：Blazor(Wasm)withReportViewerexport【发布时间】：2021-12-0100:59:11【问题描述】：我正在按照此视频中的说明进行操作：https://www.youtube.com/watch?v=7V0Yb5drLgQ当链接直接放入我剃须刀的组件h... 查看详情

Blazor Wasm 身份验证

】BlazorWasm身份验证【英文标题】：BlazorWasmAuthentication【发布时间】：2021-11-0515:24:37【问题描述】：我正在尝试构建一个blazorwasm应用程序并尝试使用Jwt令牌进行身份验证。我面临一个有趣的问题。当我登录时，我无法访问具有[Aut... 查看详情

Blazor WASM - 流畅的验证

】BlazorWASM-流畅的验证【英文标题】：BlazorWASM-FluentValidation【发布时间】：2021-09-1719:49:24【问题描述】：我在自定义验证器中创建了以下规则：publicclassAddInvoiceParameterCommandValidator:AbstractValidator<AddInvoiceParameterCommand>publicAddInvoi... 查看详情

Blazor 客户端 (WASM) 应用程序洞察

】Blazor客户端(WASM)应用程序洞察【英文标题】：BlazorClientSide(WASM)ApplicationInsights【发布时间】：2020-05-1708:48:45【问题描述】：ApplicationInsightsSDK是否适用于BlazorWASM？我正在尝试连接我的应用程序，但它没有发送任何指标。即使在... 查看详情

Blazor Wasm 身份登录/注销事件

】BlazorWasm身份登录/注销事件【英文标题】：BlazorWasmIdentityLogin/Logoutevent【发布时间】：2021-06-0815:06:54【问题描述】：在使用来自Wasm模板的标准身份的.Net5BlazorWASM应用程序中，我想在用户登录（或注销）时执行一些操作。我已经... 查看详情

Blazor WASM - 分成多个组件 (MudBlazor)

】BlazorWASM-分成多个组件(MudBlazor)【英文标题】：BlazoWASM-Separateintomultiplecomponents(MudBlazor)【发布时间】：2021-12-0721:38:34【问题描述】：我有一个编辑表单，里面有多个MudTabPanel。问题是，我有很多此类的属性，我们决定分成多个面... 查看详情

Blazor WASM 视图模型

】BlazorWASM视图模型【英文标题】：BlazorWASMViewModel【发布时间】：2021-07-3009:50:10【问题描述】：过去一年我做了很多Razor页面，几周前我开始将所有页面转换为我的Blazor服务器应用程序的ViewModel。现在我认为是时候制作一个新的Bl... 查看详情

Blazor Wasm 独立发布到 IIS

】BlazorWasm独立发布到IIS【英文标题】：BlazorWasmstandalonepublishtoIIS【发布时间】：2021-03-2209:47:32【问题描述】：要启用IIS压缩，我使用来自以下位置的Web配置：Microsoftdocs我通过web部署将（自包含/浏览器-wasm）发布到IIS，VisualStudio... 查看详情

Blazor WASM 在线/活跃用户

】BlazorWASM在线/活跃用户【英文标题】：BlazorWASMonline/activeusers【发布时间】：2021-11-1617:34:45【问题描述】：我正在使用BlazorWASM+Asp.NETAPI开发出租车管理应用程序，我想知道我的哪些驱动程序在线/可用，因此我需要了解连接状态... 查看详情

未注册身份验证 AuthenticationStateProvider 的 Blazor Wasm 托管预渲染

】未注册身份验证AuthenticationStateProvider的BlazorWasm托管预渲染【英文标题】：BlazorWasmHostedPrerenderwithAuthenticationAuthenticationStateProvidernotregistered【发布时间】：2021-03-0203:09:11【问题描述】：我有一个使用BlazorWebAssemblyHostedwithAuthenticati... 查看详情

Blazor WASM 页面路由

】BlazorWASM页面路由【英文标题】：BlazorWASMPageRouting【发布时间】：2021-07-1706:14:53【问题描述】：有没有办法通过变量来定义剃须刀组件的页面路由？我希望以这种方式完成的原因之一是，每当我需要在另一个页面上定义重定向... 查看详情

Blazor WASM 项目的 dotnet 发布错误，已添加具有相同密钥的项目

】BlazorWASM项目的dotnet发布错误，已添加具有相同密钥的项目【英文标题】：dotnetpublishofaBlazorWASMprojecterrorswithAnitemwiththesamekeyhasalreadybeenadded【发布时间】：2021-11-0223:01:36【问题描述】：在发布使用.NET6的BlazorWASM项目时遇到了问题... 查看详情

Blazor WASM 在组件之间传递值

】BlazorWASM在组件之间传递值【英文标题】：BlazorWASMpassingvaluesbetweencomponents【发布时间】：2021-06-0812:34:24【问题描述】：我从微软提供的默认应用开始。我拿起柜台，在同一页上减少和增加计数。增加和减少是放置在Counter内的子... 查看详情

blazor wasm 如何从 di 注入自定义类

】blazorwasm如何从di注入自定义类【英文标题】：blazorwasmhowtoinjectfromdiintocustomclass【发布时间】：2021-04-3006:29:34【问题描述】：有没有办法将httpClient注入到我自己的自定义类中？明确一点-我知道如何在blazor中使用DI注入组件或其... 查看详情

Blazor WASM 路由发布请求到 index.html

】BlazorWASM路由发布请求到index.html【英文标题】：BlazorWASMRoutePostRequesttoindex.html【发布时间】：2021-12-0622:38:00【问题描述】：我有一个使用VisualStudio模板设置的BlazorWASM应用。我在Server项目的Startup.cs文件中的路由如下所示：app.UseBl... 查看详情

Blazor WASM 异常导致数百个额外的套接字和连接异常

】BlazorWASM异常导致数百个额外的套接字和连接异常【英文标题】：BlazorWASMexceptionleadstohundredsofadditionalsocketandconnectionexceptions【发布时间】：2021-06-2004:44:51【问题描述】：我刚开始学习BlazorWASM（通常我是后端开发人员），我对经... 查看详情

Blazor WASM - IIS 上的独立部署

】BlazorWASM-IIS上的独立部署【英文标题】：BlazorWASM-StandaloneDeploymentonIIS【发布时间】：2021-02-0904:13:20【问题描述】：我正在尝试按照here的说明在IIS上部署BlazorWASM应用。这只是开箱即用的示例BlazorWASM应用我已将应用发布到文件夹... 查看详情

为啥在启用 AOT 编译的情况下没有为 blazor webbasesembly 生成 .wasm 文件？

】为啥在启用AOT编译的情况下没有为blazorwebbasesembly生成.wasm文件？【英文标题】：whythereisno.wasmfilegeneratedforblazorwebasesemblywithAOTcompillingenabled?为什么在启用AOT编译的情况下没有为blazorwebbasesembly生成.wasm文件？【发布时间】：2021-09-... 查看详情