在 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

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

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

此 CSS 规则将其上半部分绘制为白色背景，下半部分绘制为透明背景。

现在您需要将此样式 class 分配给包含 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 来完成的。

在 javafx 中用按钮覆盖标签背景

Overlay label background with buttons in javafx

java

javafx

javafx-2

fxml