java - 如何通过 CSS 添加外部图像

Question

请考虑以下元素结构

base_folder
          |
          |_ MyApp
          |    |
          |    |_ src
          |        |
          |        |_controllers (Controllers)
          |             |_MyClass.java
          |
          |_ themming
              |
              |_ icons
              |     |
              |     |icon.png
              |
              |_ style (css)
                    |
                    |_myStyle.css

在MyClass.java

HBox root = new HBox();
Scene scene = new Scene(root, 800, 605);

File f = new File("../themming/style/myStyle.css");
try {
    root.getStylesheets().setAll(f.toURI().toURL().toExternalForm());
} catch (MalformedURLException e) {
    e.printStackTrace();
}

root.getStyleClass().add("custom-background");

在myStyle.css

.custom-background {
    -fx-padding: 15;
    -fx-spacing: 10;
    -fx-font-size: 17pt;
    -fx-background-image: url("../icons/icon.png"));
    -fx-background-size: 22 22;
    -fx-background-position: 0 0;
    -fx-background-repeat: no-repeat;
}

所有其他样式类都从与图像有关的任何内容中挑选出来。

我已经尝试了所有可能的 url 变体:

File f = new File("themming/style/myStyle.css");
File f = new File("../themming/style/myStyle.css");
File f = new File("../../themming/style/myStyle.css");

甚至将 themming 放置在相对于元素根目录的不同位置，但没有成功。

我在这一切中错过了什么？我做错了什么？

提前谢谢大家。

Answer 1

试试这个:

.custom-background {
-fx-padding: 15;
-fx-spacing: 10;
-fx-font-size: 17pt;
-fx-background-image: url("../icons/icon.png"));
-fx-background-size: 22 22;
-fx-background-position: 0 0;
-fx-background-repeat: no-repeat;
 }