java - Vaadin - 动态布局背景

Question

我试图在单击按钮时更改布局的背景图像。我最初使用以下 css 规则添加背景，并在按钮单击事件中尝试覆盖 css 规则。

.appname .v-desktop {
     background: url(icons/material_wallpaper.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

覆盖代码

    private void setImage(String url) {
         Styles styles = Page.getCurrent().getStyles();
         styles.add(".appname .v-desktop {"
            +"background: url(icons/img.jpg) no-repeat center center fixed;"
            +"-webkit-background-size: cover;"
            +"-moz-background-size: cover;"
            +"-o-background-size: cover;"
            +"background-size: cover;}");
     }

它不会按预期工作。当我从浏览器的检查元素功能检查 css 规则时，css 规则被正确覆盖。 任何帮助

Answer 1

您应该在按钮单击时添加样式(例如“更改背景”):

button.addClickListener(...){
   myLayout.addStyleName("changed-background");

}

在您的主题 SCSS 文件中，添加自定义样式

.changed-background{
    background: url(icons/material_wallpaper.jpg) no-repeat center center fixed;
}