设置没有 css 的背景图片

Question

我正在寻找一种设置背景图像的解决方案，无需 CSS 知识和添加 css 文件。在这一点上，我依赖于Vaadin的强大力量。显然，发布的解决方案 here 不适合我，因为我使用内置的 ValoTheme 并且我非常想遵循我的原则（只使用一种样式）。

如果没有 CSS 是否可以做到这一点？

Answer 1

您可以在 body 中设置背景属性，如下所示：

<body background='path/to/image/file.png'>

这里是 link W3 Schools 网站供参考：W3 Schools - Body Background Attribute

Answer 2

没有样式就做不到。样式可以位于 SCSS 文件内或内联 (Csslayout)。以下是您在 .scss 中的操作方法您需要将图像粘贴到 VAADIN/themes//images 文件夹中。

@import "../valo/valo.scss";

@mixin mytheme {
@include valo;

// Insert your own theme rules here
    .image-background{
        background-color: red;
        background-image: url("images/w3-background.jpg");
    }
}

并使用 .addStyleName() 应用此样式，如下所示：

@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        setContent(layout);
        layout.setSizeFull();

        layout.addStyleName("image-background");
    
        layout.addComponent(new Button("Hello, World!"));
        layout.addComponent(new Button("Hello, World!"));
        layout.addComponent(new Button("Hello, World!"));
        layout.addComponent(new Button("Hello, World!"));
        layout.addComponent(new Button("Hello, World!"));
        layout.addComponent(new Button("Hello, World!"));
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

截图如下：

您可能需要在浏览器中重新加载 URL 或删除浏览器历史记录，以便正确加载更改的 CSS。

希望对您有所帮助。 :-)\

好吧，我不使用 css 很抱歉

设置没有 css 的背景图片

Set background image without css

spring

vaadin

vaadin-spring-boot