Наложение ярлыка с помощью кнопок в 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, содержащим 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 на Double.MAX_VALUE.