Question

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

没有CSS可以做到吗？

Answer 1

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

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

以下是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 {
    }
}

以下是截图：

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

我希望它有所帮助。： - ）

设置没有CSS的背景图像

2 个答案: