Vaadin 背景图像 setSize？答案

【问题标题】：Vaadin background-image setSize?Vaadin 背景图像 setSize？
【发布时间】：2017-10-11 09:43:14
【问题描述】：

目前我尝试使用 css 为 Vaadin 项目设置样式。我用：

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

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

【问题讨论】：

你需要去看看背景图片的css属性。只需在 google 中输入 background image size css 即可为您提供足够的结果，例如这个（页面顶部）。 w3schools.com/cssref/css3_pr_background-size.asp

标签： java css background-image vaadin

【解决方案1】：

Vaadin 部分

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

然后添加所需的 CSS 以更改背景。默认情况下，Valo 样式将在类v-ui 的 div 中具有背景颜色。您可以使用自定义主题并通过它覆盖背景，也可以直接从代码更新样式。

@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 或其他一些来源。实际的解决方案取决于您希望背景图像的行为方式。

【讨论】：