Vaadin-動態布局背景

Question

我試圖在單擊按鈕時更改布局的背景圖像。 我最初使用了以下CSS規則來添加背景，並在按鈕click事件中嘗試覆蓋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;
}