1

我正在寻找一种在没有 CSS 知识和添加 css 文件的情况下设置背景图像的解决方案。在这一点上，我依靠Vaadin的强大力量。显然，这里发布的解决方案不适合我，因为我使用内置的 ValoTheme 并且我非常希望遵循我的原则（仅使用一种样式）。

没有CSS可以做到这一点吗？

4

2 回答 2

3

您可以像这样设置背景属性body：

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

以下是 W3 Schools 网站的链接以供参考：W3 Schools - Body Background Attribute

于 2017-01-05T20:15:18.893 回答
1

如果没有造型，你就无法做到这一点。样式可以在 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 {
    }
}

这是屏幕截图： 带有背景图像的 Vaadin UI

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

我希望它有所帮助。:-)\

好吧，我不使用 css 很抱歉

于 2017-01-10T09:55:39.657 回答