transparent scene and stage does not work with buttons in javafx

Question

I am trying to make a transparent scene and stage with button but it seems works only with text . here is my simple code

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class TransparentStage extends Application {

@Override
public void start(Stage stage) {
    stage.initStyle(StageStyle.TRANSPARENT);
    Text text = new Text("Transparent!");
    text.setFont(new Font(40));
    //Button button = new Button("btn");
    VBox box = new VBox();
    box.getChildren().add(text);
    //box.getChildren().add(button);
    final Scene scene = new Scene(box,300, 300);
    scene.setFill(Color.TRANSPARENT);
    stage.setScene(scene);
    stage.show();
}

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

the result

but if I uncomment the button the result will be here

It dose not look transparent any more but it is only undercoated. So is Transparent does not work with buttons ? and What about if I supposed to add a button ? thank you .

Answer 1

What's going on

Text isn't a control. A simple JavaFX program which only uses Text, does not load any controls. To use controls, JavaFX needs to load the default CSS stylesheet (in Java 8, this is called modena.css). The default CSS stylesheet will set a background color for layout panes, such as the VBox you use in your example.

How to fix it

Fix using CSS

To prevent a background color for a layout pane, you need to set its background color to null:

box.setStyle("-fx-background-color: null;");

Or, Fix without CSS

box.setBackground(null);

For more info, see Region.setBackground():

It is possible for a Background to be empty, where it has neither fills nor images, and is semantically equivalent to null.

If you set the background using the setBackground() method in code, this will have priority over CSS settings (so CSS settings will not apply).

But why?

Now, I know this is weird . . . but it is just how it is. If you use no controls, layout panes have no background color because CSS is not loaded and applied to the scene graph (possibly for performance reasons). If you use controls, CSS is loaded and layout panes have a background color.

In modena.css, the definitions for this in the .root section are:

/* A very light grey used for the background of windows.  See also
 * -fx-text-background-color, which should be used as the -fx-text-fill
 * value for text painted on top of backgrounds colored with -fx-background.
 */
-fx-background: derive(-fx-base,26.4%);  

/* A light grey that is the base color for objects.  Instead of using
 * -fx-base directly, the sections in this file will typically use -fx-color.
 */
-fx-base: #ececec;

/***************************************************************************
 *                                                                         *
 * Set the default background color for the scene                          *
 *                                                                         *
 **************************************************************************/

-fx-background-color: -fx-background;