设置图像的背景半径

Question

JavaFx（CSS）中是否有一种方法可以获得与使用-fx-background-radius: 20;背景图像时相同的效果？

我的测试项目如下：

Main.css文件：

.root {
    -fx-background-image: url("space.png");
    -fx-padding: 50;
}

.hBox {
    -fx-background-image: url("background.jpg");
    -fx-background-radius: 10;
    -fx-padding: 0;
    /*-fx-shape:"M0 13,C0 5, 5 0, 13 0, L105 0, C113 0, 118 5, 118 13, L118 65, C118 73, 113 78, 105 78, L13 78, C5 78, 0 73, 0 65Z";*/
}

Java代码：

public class Start extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        VBox vBox = new VBox();
        HBox hBox = new HBox();
        hBox.setPrefHeight(100);
        hBox.setPrefWidth(100);
        hBox.getStyleClass().add("hBox");
        vBox.getChildren().add(hBox);
        hBox.getChildren().add(new Label("Hallo"));


        Scene scene = new Scene(vBox, 1000, 800, false, SceneAntialiasing.BALANCED);
        scene.getStylesheets().add(Start.class.getResource("Main.css").toExternalForm());
        primaryStage.setTitle("Test");
        primaryStage.setScene(scene);
        primaryStage.setHeight(200);
        primaryStage.setWidth(200);

        primaryStage.show();

    }
}

但结果如下：

Answer 1

我认为您需要更改的内容是布局的Shape，因此它看起来像 \ n胶囊：

.theHBox{

-fx-background-image: url("../data/background.jpg");

-fx-shape:"M0 13 C0 5 5 0 13 0 L86 0 C94 0 99 5 99 13 L99 86 C99 94 94 99 86 99 L13 99 C5 99 0 94 0 86Z";
-fx-border-color: red; // not necessary
-fx-border-radius: 20;
-fx-border-width:5;

}

这可能不是最好的解决方案，但它有效，对于path它有点难看，但你可以在网上找到更好的解决方案！

修改：

我认为这是因为形状与布局的尺寸变化无关，这就是布局形状看起来拉长的原因。我在你的例子中更新了我的路径以适合所需的大小（100 * 100），希望这对你有帮助！

Answer 2

如果有人仍在寻找解决方案，可以在此处找到可能的答案：Why is “-fx-background-radius: 10;” not working?