覆盖与按钮的标签背景在javafx

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规则的上半部分为白色背景，下半部分为透明背景。

现在您需要将此样式类分配给包含HBox的{​​{1}}：

Button

接下来，您希望将带有白色背景的<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来完成此操作。