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