首页 > 解决方案 > 如何添加剃刀背景图像

问题描述

我正在尝试将背景图像添加到我的 blazor 项目中,但是当我放置背景图像时,我会出现在我拥有的所有页面上,我该怎么做才能使我想要的背景图像仅出现在使用单个页面而不是在加号?,我有一个组件(我用作布局),我在其中放置了以下内容,这样在我的登录中我就不会出现菜单(我有它作为 LoginLayout.razor)

@inherits LayoutComponentBase

<div class="col-md-10">
    @Body
</div>

我在我的 Login.razor 页面上使用的那个 LoginLayout

标签: c#razorblazor

解决方案


如果我理解正确,您需要特定 Blazor 页面/组件的背景图像。

如果您的 site.CSS/app.CSS 中有以下设置:

.page-background-class {
    background-image:url(../images/image-name.png)
}

然后在您的页面中,您可以将所有内容包含在 div 元素中,并为其指定 page-background-class 类:

<div class="page-background-class">
    page stuff goes here
</div>

推荐阅读