JavaFX ToggleButton设置背景后无法恢复默认样式问题

我编写了如下代码，用于给ToggleButton临时显示一张背景图片，3秒后恢复原背景：

private void showImg(ToggleButton tb) {
    Image img = new Image(getAssociatedImage(tb), tb.getWidth(), tb.getHeight(), false, true, true);
    BackgroundImage bimg = new BackgroundImage(img, BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, new BackgroundSize(tb.getWidth(), tb.getHeight(), true, true, true, false));
    Background bkg = new Background(bimg);
    Background old = tb.getBackground();
    tb.setBackground(bkg);
    PauseTransition pause = new PauseTransition(Duration.seconds(3));
    pause.setOnFinished(event -> {
        tb.setBackground(old);
    });
    pause.play();
}

代码能正常显示图片3秒，但恢复原背景后，ToggleButton失去了原本的金属质感，点击没有选中状态反馈，hover效果也消失了。即使恢复了保存的old背景，也无法回到默认状态。

补充的最小可复现代码：

public class Test2 extends Application{
    @Override
    public void start(Stage stage) throws Exception {
        ToggleButton root = new ToggleButton();
        root.setPrefHeight(300);
        root.setPrefWidth(300);
        root.setOnAction(event -> {
            Image img = new Image(getClass().getResource("1.png").toExternalForm(), root.getWidth(), root.getHeight(), false, true, true);
            BackgroundImage bimg = new BackgroundImage(img, BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, new BackgroundSize(root.getWidth(), root.getHeight(), false, false, true, false));
            Background bkg = new Background(bimg);
            Background old = root.getBackground();
            root.setBackground(bkg);
            PauseTransition pause = new PauseTransition(Duration.seconds(3));
            pause.setOnFinished(evt -> {
                root.setBackground(old);
            });
            pause.play();
        });
        Scene scene = new Scene((Parent)root);
        stage.setTitle("Example");
        stage.setScene(scene);
        stage.show();
    }

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

问题原因 #

JavaFX控件的默认样式（包括hover、选中状态的视觉反馈）是通过内置CSS定义的。当直接调用setBackground()方法时，会强制覆盖控件原本由CSS管理的背景属性，此时保存的old背景只是控件当前状态下的静态背景，并不包含CSS中定义的各种状态样式规则。恢复这个静态背景后，控件无法再响应CSS中的状态样式，导致交互效果丢失。

解决方案 #

方案1：使用样式类临时替换背景（推荐） #

通过自定义CSS样式类来设置临时背景，恢复时移除该样式类，让控件回到默认CSS样式：

1. 定义CSS样式文件（比如toggle-style.css）：

.temp-bg {
    -fx-background-image: url('1.png');
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: cover;
}

2. 修改Java代码：

private void showImg(ToggleButton tb) {
    // 添加临时样式类
    tb.getStyleClass().add("temp-bg");
    
    PauseTransition pause = new PauseTransition(Duration.seconds(3));
    pause.setOnFinished(event -> {
        // 移除临时样式类，恢复默认样式
        tb.getStyleClass().remove("temp-bg");
    });
    pause.play();
}

注意：要确保CSS文件正确加载到场景中，比如在启动类中添加：

scene.getStylesheets().add(getClass().getResource("toggle-style.css").toExternalForm());

方案2：清除自定义背景，恢复CSS控制 #

如果不想用CSS文件，也可以在恢复时将背景设为null，让控件重新使用CSS定义的默认背景：

修改恢复逻辑：

pause.setOnFinished(event -> {
    // 设为null，让CSS重新接管背景样式
    tb.setBackground(null);
});

这种方式不需要额外CSS，但要注意：如果控件原本有通过代码设置的自定义背景，这种方式会清除它，回到内置CSS样式。如果控件之前有自定义背景，需要先保存原背景是否为null，再做对应处理。

内容的提问来源于stack exchange，提问作者CforLinux