如何使用 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')

需要指定scheme/protocol。

但建议的方法是在 CSS 文件中分隔 CSS 样式。例如，您可以在 CSS 文件中创建一个 CSS 样式-class（我们称之为 "application.css"）：

application.css

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

然后在 FXML 文件中将此样式表添加到根，并将 anchor 样式-class 添加到 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（源）文件夹中。 src 文件夹是一个普通的 Windows Explorer 文件夹。

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

4) 选择（突出显示）背景图像 ImageView 后，修复 Scene Builder、Inspector 右侧面板上的设置 Layout:ImageView。将 Anchor Pane Constraints（蜘蛛网一样的东西）设置为 0。并固定大小，适合宽度 800，适合高度 600。

简单易行。无需编码，Scene Builder 会自动为您编写代码。也不需要 css 文件。很高兴，你可以看到你在做什么。所见即所得，所见即所得

Answer 3

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

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

在此之后你必须 select 你的锚窗格转到它们的属性和 select CSS 样式 sheet 和 select Stle class.之后你的背景会改变。

我找到了详细解释所有要点的完整教程Change your Application Background in Scene Builder

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

How to add background-image to AnchorPane by using Scene Builder in JavaFX?

java

javafx

fxml