如何用不透明的孩子实现透明窗格？答案

【问题标题】：How to implement a transparent Pane with non-transparent children?如何用不透明的孩子实现透明窗格？
【发布时间】：2012-10-03 21:58:35
【问题描述】：

如何在 JavaFX 2 中实现带有非透明子代的透明面板？我想要达到的效果例如应用于 Blender 中的菜单：

菜单面板/窗口是透明的，但文本项是不透明的，这会产生漂亮的效果。

【问题讨论】：

标签： javafx-2

【解决方案1】：

将窗格的背景设置为带有 alpha 分量的颜色。您可以为此使用样式表或内联样式。

例如，如果您的窗格被命名为 glass，那么下面的内容将赋予它一个圆形、半透明的青色背景：

glass.setStyle("-fx-background-color: rgba(0, 100, 100, 0.5); -fx-background-radius: 10;");

您还可以使用混合、堆栈窗格或项目组来实现类似的效果，并为堆栈窗格或组后面的项目设置opacity。

这是一个使用 css 后台方法的可执行示例。

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class TranslucentPane extends Application {
  @Override public void start(final Stage stage) throws Exception {
    final ImageView imageView = new ImageView(
      new Image("https://upload.wikimedia.org/wikipedia/commons/b/b7/Idylls_of_the_King_3.jpg")
    );
    imageView.setFitHeight(300);
    imageView.setFitWidth(228);

    final Label label = new Label("The Once\nand\nFuture King");
    label.setStyle("-fx-text-fill: goldenrod; -fx-font: italic 20 \"serif\"; -fx-padding: 0 0 20 0; -fx-text-alignment: center");

    StackPane glass = new StackPane();
    StackPane.setAlignment(label, Pos.BOTTOM_CENTER);
    glass.getChildren().addAll(label);
    glass.setStyle("-fx-background-color: rgba(0, 100, 100, 0.5); -fx-background-radius: 10;");
    glass.setMaxWidth(imageView.getFitWidth() - 40);
    glass.setMaxHeight(imageView.getFitHeight() - 40);

    final StackPane layout = new StackPane();
    layout.getChildren().addAll(imageView, glass);
    layout.setStyle("-fx-background-color: silver; -fx-padding: 10;");
    stage.setScene(new Scene(layout));
    stage.show();
  }

  public static void main(String[] args) { launch(args); }
}

示例程序输出：

【讨论】：

完美！谢谢！ :)