css - JavaFX 场景 CSS 不起作用

Question

mainClass.java:

public class mainClass extends Application{
    Scene scene;
    Group group;
    @Override
    public void start(Stage stg) throws Exception{
        stg.setTitle("Hi");
        stg.setWidth(600); stg.setHeight(250);
        group = new Group();
        scene = new Scene(group, 600, 250);
           scene.getStylesheets().add("mainClass.css");
        stg.setScene(scene);
        stg.centerOnScreen();
        stg.show();
    }

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

mainClass.css

.mainClass-scene{
    -fx-background-image: url("background.jpeg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 600 250;
    -fx-background-position: center center;
    -fx-effect: dropshadow(three-pass-box, black, 30, 0.5, 0, 0); 
}

应用程序工作正常，我显示了我的框架，但我看不到场景上的背景图像。也许 css 不工作，我如何解决这个问题？

对不起，我的英语不好，谢谢。

Answer 1

您的程序存在很多问题。

1. 您定义了一个样式类 mainClass-scene 但从未使用它。
2. 您使用的 css -fx-background-image 属性仅适用于 Regions ，但您没有任何区域。
3. 您应用了投影效果，但不要在背景图像周围留下任何插图以使投影可见。
4. 您将舞台大小设置为与场景大小相同的值，但舞台上有装饰，如标题栏等，因此它的大小不能相同。
5. 通常最好将 css 文件作为类资源检索。

这是一个适合我并生成上面图像的更新版本。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class MainClass extends Application{
  @Override public void start(Stage stage) throws Exception{
    stage.setTitle("Hi");

    StackPane layout = new StackPane();
    layout.getStylesheets().add("mainClass.css");
    layout.getStyleClass().add("main-class");

    Scene scene = new Scene(layout, 600, 250);
    scene.getStylesheets().add(
      getClass().getResource("mainClass.css").toExternalForm()
    );
    stage.setScene(scene);
    stage.setResizable(false);
    stage.centerOnScreen();
    stage.show();
  }

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

相关CSS:

/**
 * file: mainClass.css
 *   Place in same directory as MainClass.java.
 *   Have your build system copy this file to your build output directory.
 **/

.main-class {
  -fx-background-image: url('http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/256/Poison-blue-icon.png');
  -fx-background-repeat: stretch;   
  -fx-background-size: 570 220;
  -fx-background-position: center center;
  -fx-effect: dropshadow(three-pass-box, black, 30, 0.5, 0, 0); 
  -fx-background-insets: 30;
}