JavaFX - белый оверлей для элементов пользовательского интерфейса в CSS

Question

Я пытаюсь следовать руководству по материальному дизайну для цветовой схемы моего приложения. На данный момент я нахожусь в той части, где объясняется, как работает темная тема.

Это мой CSS:

#main-app {
    -fx-background-color: #121212;
    -fx-background-radius: 5px;
}

#top-bar {
    -fx-background-color: bar-color;
    -fx-background-radius: 5px 5px 0 0;
}
#bottom-bar {
    -fx-background-color: bar-color;
    -fx-background-radius: 0 0 5px 5px;
}

Как я могу сделать 5% оверлей, как показано на изображении ниже, моего #main-app background-color, чтобы затем я мог применить его к верхней и нижней полосам?

Answer 1

Даю еще один снимок; -)

CSS Файл:

#main-app {
    -fx-background-radius: 5px;
    -fx-background-color: #121212;
}

#top-bar {
    -fx-background-radius: 5px 5px 0 0;
    -fx-background-color: inherit;
}

#top-bar-overlay {
    -fx-background-radius: 5px 5px 0 0;
    -fx-background-color: rgba(255, 255, 255, 0.05);
}

#bottom-bar {
    -fx-background-radius: 0 0 5px 5px;
    -fx-background-color: inherit;
}

#bottom-bar-overlay {
    -fx-background-radius: 0 0 5px 5px;
    -fx-background-color: rgba(255, 255, 255, 0.5);
}

F XML Файл:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>

<AnchorPane stylesheets="@styling2.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.OverlayController">
   <children>
      <HBox alignment="CENTER_LEFT" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <Label text="Transparency Value for Top Bar Overlay:" />
            <Spinner fx:id="topBarTransparencySpinner" />
            <Label text="Transparency Value for Bottom Bar Overlay:" />
            <Spinner fx:id="bottomBarTransparencySpinner" />
         </children>
      </HBox>
      <GridPane id="main-app" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="27.0">
         <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints vgrow="SOMETIMES" />
            <RowConstraints vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
            <AnchorPane id="top-bar">
               <children>
                  <HBox id="top-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                     <children>
                        <Label text="Top Bar">
                           <font>
                              <Font size="36.0" />
                           </font>
                           <HBox.margin>
                              <Insets />
                           </HBox.margin>
                        </Label>
                     </children>
                  </HBox>
                  <Pane id="top-bar-overlay" fx:id="topBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
            <AnchorPane GridPane.rowIndex="1">
               <children>
                  <HBox id="bottom-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                     <children>
                        <Label text="Bottom Bar">
                           <font>
                              <Font size="36.0" />
                           </font>
                        </Label>
                     </children>
                  </HBox>
                  <Pane id="bottom-bar-overlay" fx:id="bottomBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</AnchorPane>

Класс контроллера:

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.layout.Pane;

import java.net.URL;
import java.util.ResourceBundle;

public class OverlayController implements Initializable {

    @FXML
    Spinner<Double>
            topBarTransparencySpinner,
            bottomBarTransparencySpinner;
    @FXML
    private Pane
            topBarOverlayPane,
            bottomBarOverlayPane;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        topBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.05, 0.01));
        bottomBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.5, 0.01));

        topBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
                topBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
        bottomBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
                bottomBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
    }
}

Предварительный просмотр:

Этот пример помогает вам в вашем проекте?

Answer 2

Если ваш основной фон уже черный, я думаю, вы можете использовать цвет фона rgba на блоках. Итак, для 5% белого оверлея rgba (255,255,255,0.05).

Я не уверен, что это то, что вы ищете, но я надеюсь, что это может вам немного помочь.

Answer 3

Я думаю, что это невозможно только с css. Вот один пример возможного решения:

Класс контроллера:

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.Pane;

import java.net.URL;
import java.util.ResourceBundle;

public class Controller implements Initializable {

    @FXML
    private FlowPane rootFlowPane;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        for (int i = 0; i < rootFlowPane.getChildren().size(); i++) {
            Node node = rootFlowPane.getChildren().get(i);
            if (node instanceof Pane) {
                Pane pane = (Pane) node;

                String style = "-fx-background-color: rgba(255, 255, 255, %s); -fx-background-radius: 5; -fx-border-color: grey;";

                if (i == 0)
                    pane.setStyle(String.format(style, "0"));
                else if (i == 1)
                    pane.setStyle(String.format(style, "0.05"));
                else if (i == 2)
                    pane.setStyle(String.format(style, "0.07"));
                else if (i >= 100)
                    pane.setStyle(String.format(style, "1"));
                else {
                    String transparency = String.format("%.2f", (i + 5) / 100.0).replace(",", ".");
                    pane.setStyle(String.format(style, transparency));
                }
            }
        }
    }
}

F XML Файл:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Pane?>


<FlowPane fx:id="rootFlowPane" hgap="20.0" prefHeight="460.0" prefWidth="460.0" style="-fx-background-color: #121212;" vgap="20.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
      <Pane prefHeight="200.0" prefWidth="200.0" />
      <Pane prefHeight="200.0" prefWidth="200.0" />
      <Pane prefHeight="200.0" prefWidth="200.0" />
      <Pane prefHeight="200.0" prefWidth="200.0" />
   </children>
   <padding>
      <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
   </padding>
</FlowPane>

Предварительный просмотр: