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

Question

我正在用java开发一个聊天机器人项目，在GUI中我使用JavaFX、IDE eclipse和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参考指南中指定的那样，TextArea是两个子结构的关联：ScrollPane和Area。您必须更改它们的样式。

在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")
 }