Question

目前我尝试用css设计一个Vaadin项目。我用：

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

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

Answer 1

Vaadin部分

如果使用Vaadin运行Spring Boot，则将背景图像放在文件夹src/main/resources/static中，如果没有运行Spring Boot，则使用src/main/webapp文件夹。

然后添加所需的CSS以更改背景。默认情况下，Valo样式将在div中具有类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背景图像setSize？

1 个答案: