JavaFX：無法從 SceneBuilder 設置 -fx-background-image

Question

有人可以解釋為什么我不能從 SceneBuilder 中的字段 -fx-background-image 加載圖像嗎？

圖片供參考：

• 場景生成器
• 應用

我發現我可以從 a.css 文件中做到這一點，例如：

#base {
  -fx-background-image: url("background.jpg");
  -fx-background-size: 100% 100%;
  -fx-background-position: center center;
}

但這不會從 SceneBuilder 內部更新，而我也想要它。

Answer 1

您需要將樣式表附加到 fxml 元素，以便將其應用於在 SceneBuilder 設計視圖中查看的 FXML。

SceneBuilder 屬性表視圖中有一個樣式表字段（它實際上在您問題的圖像中）。 Select 根元素並單擊 + 符號將 select CSS 樣式表應用。 樣式表將應用於根元素和所有子元素。

或者您可以使用Preview | Scene Style Sheets | Add Style Sheet... Preview | Scene Style Sheets | Add Style Sheet... Preview | Scene Style Sheets | Add Style Sheet...以在您使用預覽視圖時應用樣式表。

如果您有 CSS 文件，則不需要（也可能不應該）在 Scene Builder 中設置樣式屬性。 styles 將根據其選擇器從 CSS 文件中應用。 而是在場景構建器中設置 id 和樣式類並附加樣式表。

你的 id 是base ，所以如果節點的 id 設置為base ，選擇器會找到它。 我更喜歡使用樣式類而不是 id，但 id 也可以。

您直接按名稱引用圖像，而不使用相對路徑。 因此，只要圖像與 fxml 文件位於相同的位置，並且樣式表如上文所述正確應用，CSS 中定義的圖像應該顯示在 SceneBuilder 中。

我認為 SceneBuilder 會自動監視文件系統的更改，因此如果您在外部更改 FXML 或 CSS 文件，它將自動重新加載它們（通知您重新加載時可能出現的一些但不是全部錯誤）。

如果仍然無法正常工作，請參閱Eden 指南，了解在 JavaFX 應用程序中的何處放置資源，並嘗試遵循他們推薦的方法（您可能已經這樣做了，因此定位圖像可能不是您的問題）。