css - 使用 Java 以编程方式在 Vaadin 14 中通过 CSS 指定背景图像

问题描述

在 Vaadin 14 中，我们可以在 Java 代码中以编程方式设置一些 CSS 值。

我们可以调用getElement, thengetStyle并设置 CSS 属性的名称和一个值。

例如，这里我们将背景颜色设置为绿色。

public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-color" , "Green" );

对于像这样的 CSS 属性，我们如何做到这一点，background-image它需要一个名为的 CSS 函数的参数url？

硬编码 CSS 路径不起作用。

public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-image" , "cat.jpg" );

➥ 在 Vaadin Flow 中，我们如何使用 Java 获取 CSS 来查找图像，例如"cat.jpg"？

此外，该图像文件的相对或绝对路径应该是什么？我知道 Vaadin Web 应用程序中静态图像的通常位置是在src/main/resources文件夹中。

标签： cssbackground-imagevaadinvaadin-flow

解决方案

对于“Plain Java Servlet”（非Spring、非CDI）Vaadin 项目，该文件应位于/src/main/webapp

在春天的情况下：/src/main/resources/META-INF/resources/img

取自官方文档：Resource Cheat Sheet

而且，正如@symlink 在评论中注意到的那样，您应该使用url('filename')语法来引用 css 中的图像：CSS background-image 属性

例如，如果我有一个名为 a 的文件cat.jpg，/src/main/webapp/images那么这会设置它getElement().getStyle().set("background-image","url('images/cat.jpg')");

这是另一个示例，其中图片文件没有嵌套在cat.jpg文件夹中。这是一个 Vaadin 14.0.10 Web 应用程序，使用使用Vaadin 开始新项目页面上的技术堆栈选项。src/main/webappimagesPlain Java Servlet

下面是使用此图像作为背景的整个视图的源代码。

注意构造函数的第一行，我们将"url('cat.jpg')"其作为参数传递。看看我们如何在文件名周围使用单引号来嵌入 Java 字符串而不转义。幸运的是，CSS 规范允许使用单引号 (') 或双引号 (") — 对于在 Java 代码中嵌入 CSS 的 Vaadin 程序员来说非常方便。

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-image" , "url('cat.jpg')" );

        Button button = new Button( "Click me" , event -> Notification.show( "Clicked!" ) );
        add( button );
    }
}

还有这个网络应用程序的截图。图像被裁剪，因为VerticalLayout. 布局很短，因为它只包含一个按钮，其标签Click me在左边缘的蓝色文本中隐约可见。裁剪后的猫脸在整个页面中重复出现，这是 CSS 的默认设置。

css - 使用 Java 以编程方式在 Vaadin 14 中通过 CSS 指定背景图像

问题描述

解决方案

推荐阅读