为带Login Overlay的登录页添加背景图片遇阻求助

问题描述 #

给包含Login Overlay的登录页添加背景图片时，无法成功显示名为"books.jpg"的背景图，已尝试调整CSS和HTML代码但无效。

代码现状 #

LoginView类 #

package com.example.application.views;

import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.BeforeEnterEvent;
import com.vaadin.flow.router.BeforeEnterObserver;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

@Route("login")
@PageTitle("Login | Sample App")
public class LoginView extends Div implements BeforeEnterObserver {

   private final LoginOverlay login = new LoginOverlay();

   public LoginView(){

      addClassName("login-view");
      LoginOverlay loginOverlay = new LoginOverlay();
      loginOverlay.setTitle("Sample App");
      loginOverlay.setOpened(true);
      loginOverlay.setAction("login");
      add(loginOverlay);

   }

   @Override
   public void beforeEnter(BeforeEnterEvent beforeEnterEvent) {
      // 提示用户认证错误
      if(beforeEnterEvent.getLocation()
            .getQueryParameters()
            .getParameters()
            .containsKey("error")) {
         login.setError(true);
      }
   }
}

Index.html #

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body, #outlet {
      height: 100vh;
      width: 100%;
      margin: 0;
    }

    [part="backdrop"] {
         background-image: url(../images/books.png);
         background-size: cover;
     }
  </style>
  <!-- index.ts会自动引入（开发服务器或构建时） -->
</head>
<body>

</body>
</html>

Styles.css #

@import url('./views/list-view.css');
@import url('lumo-css-framework/all-classes.css');

a[highlight] {
    font-weight: bold;
    text-decoration: underline;

}
 .login-view {
   background-image: url("images/books.jpg");
   background-repeat: no-repeat;
   background-position: center
 }

问题分析 #

1. 层级遮挡：LoginOverlay默认全屏覆盖页面，其内部的[part="backdrop"]元素自带半透明黑色背景，会完全遮挡.login-view的背景图。
2. 选择器精度不足：index.html中的[part="backdrop"]选择器范围太广，无法精准匹配LoginOverlay的背景层。
3. 资源引用不一致：代码中同时出现books.png和books.jpg，需确保实际文件名与代码引用一致。

解决步骤 #

1. 确认静态资源路径 #

将books.jpg放置在Vaadin项目的src/main/resources/META-INF/resources/images/目录下，确保编译后可通过/images/books.jpg访问。

2. 精准设置LoginOverlay背景 #

在styles.css中添加以下样式，直接针对LoginOverlay的背景层配置图片：

/* 匹配所有LoginOverlay的背景层 */
vaadin-login-overlay [part="backdrop"] {
    background-image: url("images/books.jpg");
    background-size: cover;
    background-color: transparent; /* 移除默认半透明黑背景 */
}

若需更精准的控制，可给LoginOverlay添加自定义类：

• 修改LoginView代码，添加自定义类：

public LoginView(){
    addClassName("login-view");
    LoginOverlay loginOverlay = new LoginOverlay();
    loginOverlay.addClassName("custom-login-overlay"); // 添加自定义类
    loginOverlay.setTitle("Sample App");
    loginOverlay.setOpened(true);
    loginOverlay.setAction("login");
    add(loginOverlay);
}

• 在styles.css中添加对应样式：

.custom-login-overlay [part="backdrop"] {
    background-image: url("images/books.jpg");
    background-size: cover;
    background-color: transparent;
}

3. 修正代码冗余（可选） #

LoginView中定义了两个LoginOverlay实例，beforeEnter方法操作的是未添加到页面的login变量，建议统一为一个实例：

private final LoginOverlay loginOverlay = new LoginOverlay();

public LoginView(){
    addClassName("login-view");
    loginOverlay.setTitle("Sample App");
    loginOverlay.setOpened(true);
    loginOverlay.setAction("login");
    add(loginOverlay);
}

@Override
public void beforeEnter(BeforeEnterEvent beforeEnterEvent) {
    if(beforeEnterEvent.getLocation()
          .getQueryParameters()
          .getParameters()
          .containsKey("error")) {
       loginOverlay.setError(true);
    }
}

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