Vaadin background-image setSize？

问题描述：

目前我尝试用CSS来设计一个Vaadin项目。我用：Vaadin background-image setSize？

.image-background { 
     background-image: url("../resources/bilder/wallpaper1.jpg");

然而结果并不如预期。该图像的分辨率为1920x1080像素。但是如果我现在把网站放在低分辨率的屏幕上，我只能看到图像的一部分。是否有可能使用CSS来设置图像的全屏大小？

你需要去看看背景图像的CSS属性。只需在Google中输入'background image size css'就可以获得足够的结果，例如这个（页面顶部）。 https://www.w3schools.com/cssref/css3_pr_background-size.asp –

答

Vaadin部分

如果运行春季启动与Vaadin的地方背景图像文件夹src/main/resources/static，如果没有运行春季引导，然后用src/main/webapp文件夹。

然后添加所需的CSS来更改背景。默认情况下，Valo风格的背景颜色将与分类v-ui分开。您可以使用自定义主题并覆盖背景，也可以直接从代码更新样式。

@SpringUI 
public class MyUi extends UI { 

    @Override 
    protected void init(VaadinRequest vaadinRequest) { 
     initBackground(); 
     initContent(); 
    } 

    private void initBackground() { 
     Page.getCurrent().getStyles().add(
       ".v-ui { background: url(background.jpg) no-repeat center center fixed;" + 
         "-webkit-background-size: cover;" + 
         "-moz-background-size: cover;" + 
         "-o-background-size: cover;" + 
         "background-size: cover; }" 
     ); 
    } 
...

CSS部分

对于CSS的一部分，您可以检查css tricks或其他来源。实际的解决方案取决于你想要背景图像的行为。

Vaadin background-image setSize？

相关推荐