JavaFX中如何将ListView所有项设为透明以显示BorderPane背景

BorderPane中嵌套了ListView，ListView内部加载若干VBox组件，希望将ListView的所有项设置为透明背景以显示BorderPane的背景，但设置项的背景为透明后并未生效。

用户提供的项模板FXML（VBox） #

<VBox prefHeight="219.0" prefWidth="335.0" style="-fx-background-color: transparent;" stylesheets="@css/sheet.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.progetto.controller_graf.ViaggioController">
    <Pane prefHeight="219.0" prefWidth="590.0" style="-fx-background-color: transparent;">
        <ImageView fx:id="imagine" fitHeight="219.0" fitWidth="335.0" pickOnBounds="true" preserveRatio="true" />
        <Pane prefHeight="219.0" prefWidth="335.0" style="-fx-background-color: transparent;">
            <children>
                <Rectangle arcHeight="5.0" arcWidth="5.0" fill="WHITE" height="44.0" layoutX="20.0" layoutY="161.0" stroke="WHITE" strokeType="INSIDE" width="301.0" />
                <ImageView fitHeight="38.0" fitWidth="36.0" layoutX="20.0" layoutY="164.0">
                    <image>
                        <Image url="@css/immagini/calendario.png" />
                    </image>
                </ImageView>
                <Text fx:id="data" layoutX="68.0" layoutY="189.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" styleClass="fontnuovo" text="Text" wrappingWidth="204.70003700256348" />
                <Text fx:id="prezzo" layoutX="284.0" layoutY="189.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" styleClass="fontnuovo" text="Text" />
                <Button fx:id="title" alignment="TOP_LEFT" layoutX="-15.0" layoutY="-9.0" mnemonicParsing="false" onAction="#pagetrip" prefHeight="79.0" prefWidth="292.0" style="-fx-background-color: transparent; -fx-font-size: 35; -fx-cursor: hand;" styleClass="fontnuovo" text="Button" />
            </children>
        </Pane>
    </Pane>
</VBox>

用户提供的主界面FXML（BorderPane） #

<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="650.0" prefWidth="1000.0" stylesheets="@css/sheet.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.progetto.controller_graf.ViewTripController">
    <center>
        <Pane prefHeight="200.0" prefWidth="200.0" styleClass="background" BorderPane.alignment="CENTER">
            <children>
                <ListView fx:id="listaview" prefHeight="522.0" prefWidth="436.0">
                    <styleClass>
                        <String fx:value="list-view" />
                        <String fx:value="list-cell" />
                    </styleClass>
                </ListView>
            </children>
        </Pane>
    </center>
</BorderPane>

只设置VBox透明没用，因为ListView本身、ListCell容器默认都有不透明背景，需要同时处理这几个部分：

1. 修改CSS样式（sheet.css） #

在你的样式文件中添加以下代码：

/* 让ListView本身背景透明 */
.list-view {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

/* 设置ListCell背景透明，包括默认、选中、hover状态 */
.list-view .list-cell {
    -fx-background-color: transparent;
    -fx-padding: 5 0 5 0; /* 可选：调整项之间的间距 */
}

/* 移除选中项的高亮背景 */
.list-view .list-cell:selected {
    -fx-background-color: transparent;
    -fx-text-fill: inherit; /* 保持文本颜色不变 */
}

/* 可选：让滚动条也透明，滑块设为半透明 */
.list-view .scroll-bar:vertical,
.list-view .scroll-bar:horizontal {
    -fx-background-color: transparent;
}

.list-view .scroll-bar .thumb {
    -fx-background-color: rgba(0,0,0,0.2);
}

2. 调整ListView的FXML配置 #

把主界面中ListView的样式类简化，不需要直接给ListView加list-cell类，CSS会自动匹配子元素：

<ListView fx:id="listaview" prefHeight="522.0" prefWidth="436.0" styleClass="list-view" />

3. 保留VBox的透明设置 #

维持你原来VBox的-fx-background-color: transparent;样式即可，代码中的白色Rectangle是业务需要，不影响透明效果。

内容的提问来源于stack exchange，提问作者Luca Lo Mastro