使用场景生成器的 Javafx 背景图像

Question

我正在 java 开发一个聊天机器人项目，对于 GUI，我使用的是 JavaFX，IDE eclipse oxygen 和 scene builder 8.4.1。

我在向文本区域添加背景图像时遇到问题。这是我所做操作的屏幕截图，它什么也没显示（甚至没有错误）。

以下是场景生成器生成的fxml代码：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <AnchorPane prefHeight="56.0" prefWidth="600.0" style="-fx-background-color: blue;" BorderPane.alignment="CENTER">
         <children>
            <ImageView fitHeight="51.0" fitWidth="79.0" layoutX="23.0" layoutY="20.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../../../Downloads/background.jpg" />
               </image></ImageView>
            <Label layoutX="118.0" layoutY="36.0" text="Ibot" />
         </children>
      </AnchorPane>
   </top>
   <center>
      <TextArea editable="false" prefHeight="200.0" prefWidth="200.0" style="-fx-background-image: url(&quot;../../../Downloads/background.jpg&quot;); -fx-background-repeat: stretch;" BorderPane.alignment="CENTER" />
   </center>
   <bottom>
      <HBox BorderPane.alignment="CENTER">
         <children>
            <TextField prefHeight="25.0" prefWidth="476.0" promptText="Type in here" HBox.hgrow="ALWAYS">
               <HBox.margin>
                  <Insets />
               </HBox.margin>
            </TextField>
            <Region prefHeight="25.0" prefWidth="60.0" />
            <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="57.0" text="Send">
               <HBox.margin>
                  <Insets />
               </HBox.margin>
            </Button>
         </children>
         <BorderPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
         </BorderPane.margin>
         <padding>
            <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
         </padding>
      </HBox>
   </bottom>
</BorderPane>

Answer 1

它可能不起作用，因为如 JavaFX CSS Reference Guide 中所述，TextArea 是两个子结构的关联：ScrollPane 和 Region。你必须改变那些风格。

在 CSS 中这应该有效：

#text-area-id .content{
    -fx-background-image : url("the_path_to_your_image")
    /* others properties */
}

编辑以回复评论：

对于一个按钮你只需要设置属性 -fx-background-image:

 #your-button{
        -fx-background-image : url("the_path_to_your_image")
 }

使用场景生成器的 Javafx 背景图像

Javafx background image using scene builder

javafx

fxml

scenebuilder