如何在JavaFX中使用Scene Builder将背景图像添加到AnchorPane？

Question

如何AnchorPane使用Scene Builder 将背景图像添加到a ？

我试过它:

-fx-background-image url('C:/Users/Documents/page_background.gif')

我如何在Scene Builder中设置它.

并生成的FXML:

<AnchorPane id="LoginAnchorPane" fx:id="LoginAnchorPane" prefHeight="400.0" prefWidth="600.0" style="-fx-background-image: url('C:/Users/Documents/page_background.gif');" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafx_lsdu.LoginController">

Answer 1

您可以尝试在Scene Builder中直接将其设置为:

-fx-background-image: url('file:C:/Users/Documents/page_background.gif')

它需要指定方案/协议.

但建议的方法是在CSS文件中分离CSS样式.例如,您可以在CSS文件中创建一个CSS样式类(让我们称之为"application.css"):

application.css

.anchor {
    -fx-background-image:url('file:/C:/Users/Documents/page_background.gif');
}

然后在FXML文件中将此样式表添加到根目录,并将anchor样式类添加到AnchorPane:

<AnchorPane prefHeight="545.0" prefWidth="712.0" styleClass="anchor" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.60">
  <stylesheets>
    <URL value="@application.css" />
  </stylesheets>
</AnchorPane>

注意:样式表应添加到根节点(在示例中AnchorPane是根节点).