如何仅在Razor Page登录页设置全屏背景图片？

方法一：给登录页使用独立布局（推荐） #

这种方式能彻底避免和其他页面的样式冲突，逻辑清晰：

1. 复制项目里的_Layout.cshtml，重命名为_Layout.Login.cshtml。
2. 修改新布局的<body>标签，添加background-logo类：

<body class="background-logo">
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
</body>

（如果登录页不需要导航栏等通用元素，可直接在这个布局里删掉对应代码）
3. 在Login.cshtml顶部指定使用该独立布局：

@{
    Layout = "_Layout.Login";
}

方法二：在默认布局中动态控制样式 #

如果不想新增布局文件，可以通过路由或ViewData来动态添加背景类：

方式A：通过路由判断

修改_Layout.cshtml的<body>标签：

<body class="@(ViewContext.RouteData.Values["Page"]?.ToString() == "/Account/Login" ? "background-logo" : "")">

当访问登录页时，自动为body添加背景类，其他页面则不会生效。

方式B：通过ViewData传递标识

1. 在Login.cshtml顶部设置ViewData：

@{
    ViewData["BodyClass"] = "background-logo";
}

2. 修改_Layout.cshtml的<body>标签：

<body class="@ViewData["BodyClass"]">

其他页面不设置该ViewData，就不会应用背景样式。

优化CSS确保全屏效果 #

修改site.css中的.background-logo样式，添加min-height: 100vh保证背景占满整个视口高度：

.background-logo{
  background-image: url(../img/image.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者DonDavid12