java - JavaFX:如何将CSS添加到FXML中的Image元素

我有以下FXML：

<VBox id="customerFormPane" styleClass="customerForm" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.customer.CustomerFormController" >
    <stylesheets>
        <URL value="@customerform.css"/>
    </stylesheets>

    <GridPane>
        <columnConstraints>
            <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
            <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
        </columnConstraints>

        <ImageView id="boxImage" fitWidth="100" fitHeight="100">
            <image>
                <Image url="@/com/exmaple/resources/icons/office.png" />
            </image>
        </ImageView>
    </GridPane>

</VBox>

我想在CSS中为图片定义边框。我已经在customerform.css文件中尝试过此操作：

.customerForm Image, .customerForm ImageView, .customerForm image {

    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: red;

}

但是什么也没有发生，关于如何选择ImageView的任何提示？ （注意：图像显示正确）

最佳答案

节点不支持的CSS属性将被忽略。就您而言，这就是所有这些属性。 Region提供-fx-background-color，-fx-border-style和-fx-border-color属性，但是ImageView不是Region的子类。

为了使它起作用，您需要将图像包装在合适的Region类型中。

例：

<GridPane>
    <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
        <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
    </columnConstraints>
    <!-- container using pref size as max size to not grow larger than the image -->
    <Pane styleClass="image-container" maxWidth="-Infinity" maxHeight="-Infinity">
        <children>
            <ImageView id="boxImage" fitWidth="100" fitHeight="100">
                <image>
                    <Image url="@/com/exmaple/resources/icons/office.png" />
                </image>
            </ImageView>
       </children>
    </Pane>
</GridPane>

.image-container {
    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: red;
}

顺便说一句：您似乎不确定这里哪些选择器是正确的。您需要在选择器中使用节点类型。 .customerForm ImageView或#boxImage将用作选择器。