javafx中带按钮的java覆盖标签背景

Question

我的边框窗格中有以下元素，但我希望按钮后面有白色背景。我该怎么做

我有这个

但是我想要这样的东西

为了进行设置，我使用fxml。见下文

<VBox prefHeight="200.0" prefWidth="100.0" BorderPane.alignment="CENTER">
     <BorderPane.margin>
        <Insets bottom="10.0" top="10.0" />
     </BorderPane.margin>
     <children>
        <Label styleClass="text-tab" text="Local Offers" />
        <Label styleClass="text-tab-sub" text="My text label with white bg" />
        <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
           <children>
              <Button mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="Button">
                 <styleClass>
                    <String fx:value="btn-category" />
                    <String fx:value="btn-shopping" />
                 </styleClass>
              </Button>
              <Button layoutX="10.0" layoutY="10.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="Button">
                 <styleClass>
                    <String fx:value="btn-category" />
                    <String fx:value="btn-eat" />
                 </styleClass>
                 <HBox.margin>
                    <Insets left="10.0" />
                 </HBox.margin>
              </Button>
              <Button layoutX="120.0" layoutY="10.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="Button">
                 <styleClass>
                    <String fx:value="btn-category" />
                    <String fx:value="btn-leisure" />
                 </styleClass>
                 <HBox.margin>
                    <Insets left="10.0" />
                 </HBox.margin>
              </Button>
              <Button layoutX="230.0" layoutY="10.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="Button">
                 <styleClass>
                    <String fx:value="btn-category" />
                    <String fx:value="btn-home" />
                 </styleClass>
                 <HBox.margin>
                    <Insets left="10.0" />
                 </HBox.margin>
              </Button>
              <Button layoutX="330.0" layoutY="10.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="Button">
                 <styleClass>
                    <String fx:value="btn-category" />
                    <String fx:value="btn-health" />
                 </styleClass>
                 <HBox.margin>
                    <Insets left="10.0" />
                 </HBox.margin>
              </Button>
              <Button layoutX="430.0" layoutY="10.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="Button">
                 <styleClass>
                    <String fx:value="btn-category" />
                    <String fx:value="btn-services" />
                 </styleClass>
                 <HBox.margin>
                    <Insets left="10.0" />
                 </HBox.margin>
              </Button>
              <Button layoutX="560.0" layoutY="10.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="100.0" text="Button">
                 <styleClass>
                    <String fx:value="btn-category" />
                    <String fx:value="btn-events" />
                 </styleClass>
                 <HBox.margin>
                    <Insets left="10.0" />
                 </HBox.margin>
              </Button>
           </children>
           <VBox.margin>
              <Insets />
           </VBox.margin>
        </HBox>
     </children>
  </VBox>

这是我迄今为止应用的css（减去css为每个按钮上色）

.text-tab {
    -fx-font-size: 39;
    -fx-background-color: #FFC000;
    -fx-font-weight:bold;
    -fx-text-fill: #FFFFFF;
    -fx-border-radius: 10 10 0 0;
    -fx-background-radius: 10 10 0 0;
    -fx-padding: 5 10 0 10;
}

.text-tab-sub {
    -fx-font-size: 30;
    -fx-background-color: #FFFFFF;
    -fx-font-weight: bold;
    -fx-text-fill: #3B5999;
}

.btn-category {
    -fx-border-color:#ffffff;
    -fx-border-radius:15;
    -fx-border-width:4;
    -fx-background-radius:20;
    -fx-margin: 10 10 0 0;
}

Answer 1

这需要一个额外的样式类和另一个CSS规则：

.white-half {
  -fx-background-color:linear-gradient(from 0% 0% to 0% 50%, white, white 49%, white 99%, transparent);
}

此CSS规则使用白色背景绘制其上半部分，使用透明背景绘制其下半部分

现在需要将此样式类分配给包含Button的HBox：

<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" styleClass="white-half">

接下来，您要将带有白色背景的Label拉伸到整个宽度：

<Label styleClass="text-tab-sub" maxWidth="1.7976931348623157E308" text="My text label with white bg" />

这是通过将其maxWidth属性设置为Double.MAX_VALUE来实现的