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

Question

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

我试过它：

-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是根节点）。

Answer 2

我是JavaFX的新手，但我在没有任何编码的情况下向我的AnchorPane添加了背景图像。 只需拖放图像即可。 那就是Scene Builder的设计，不是这样吗？ 我认为这是切片面包以来最好的东西。

1）我用Photoshop编辑了我的背景图片，以获得与我的AnchorPane相同的尺寸，800 x 600像素。 我还在Photoshop中创建了一个相同大小的新空白文件。 文件，新，空白文件。 然后我复制了我的背景图片并将其粘贴在空白文件的顶部，以便我可以设置不透明度50％（透明度）。 我喜欢这样，它使我的背景图片“柔和”。

2）我将50％不透明度（50％透明）背景图片复制到我的NetBeans项目的src（source）文件夹中。 src文件夹是普通的Windows资源管理器文件夹。

3）将背景jpg图像从src文件夹拖放到Scene Builder中作为ImageView，拖放到Document，Hierarchy中的AnchorPane图标（节点）上。 Scene Builder的左侧。 如果ImageView在其他地方掉落，将它拖到它所属的位置，你想要它在AnchorPane中，那就是背景。

4）选择背景图像ImageView（突出显示），修复Scene Builder，Inspector，Layout：ImageView右侧面板上的设置。 将Anchor Pane Constraints（蜘蛛网物）左侧和顶部设置为0.并修复尺寸，适合宽度800，适合高度600。

就像馅饼一样简单。 无需编码，Scene Builder会自动为您编写代码。 也不需要css文件。 很高兴，你可以看到你在做什么。 Wysiwyg，你看到的就是你得到的。

Answer 3

您需要创建一个新的CSS文件并将下面给出的代码放入其中，并在url中写入您的图像名称。

.bodybg{
     -fx-background-image: url('**your image name**.jpg');
     -fx-background-size: 100% 100%;    
  }

在此之后，您必须选择锚定窗格，转到其属性并选择CSS样式表并选择Stle类。 在此之后，您的背景将会改变。

我找到了一个完整的教程，详细解释了所有要点。 在Scene Builder中更改应用程序背景