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;}");
     }

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

Answer 1

您应该在点击按钮时添加样式（例如＆＃34;更改背景＆＃34;）：

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

}

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

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

Vaadin - 动态布局背景

1 个答案: