如何在Vaadin 23的LoginOverlay中设置自定义背景图片

直接用vaadin-login-overlay-wrapper或vaadin-login-backdrop-wrapper选择器不生效，是因为Vaadin组件的Shadow DOM隔离机制，内部元素需要通过::part伪类才能访问。以下是可行的配置方案：

1. 正确的CSS选择器写法 #

要修改登录弹窗的全屏背景遮罩，需要针对组件暴露的backdrop部分设置样式，示例代码如下：

/* 全局样式文件中，比如 styles.css */
vaadin-login-overlay::part(backdrop) {
  background-image: url('/images/your-background.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

如果需要修改弹窗容器本身的背景（而非全屏遮罩），可以用：

vaadin-login-overlay-wrapper {
  background-image: url('/images/container-bg.jpg');
  background-size: cover;
}

2. 确保样式正确注入 #

• 若使用组件级样式，需要通过@CssImport指定themeFor来穿透Shadow DOM：

@CssImport(value = "./styles/login-custom.css", themeFor = "vaadin-login-overlay")
public class MainView extends VerticalLayout {
  // 视图业务代码
}

• 全局样式文件需放在src/main/resources/META-INF/resources/styles/目录下，确保项目能正确加载。

3. 图片路径注意事项 #

• 图片文件放在src/main/resources/META-INF/resources/images/目录下时，路径直接写/images/xxx.jpg即可
• 若使用相对路径，需确保路径相对于样式文件的位置正确

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