Css 设置图像的背景半径

在JavaFx（CSS）中是否有一种方法可以获得与使用

-fx背景半径：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();

    }
}

但结果是这样的：

我认为您需要更改的是布局的
形状
，使其看起来像一个胶囊：

.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;

}

这可能不是最好的解决方案，但它很有效，而且对于
路径来说有点难看，但您可以在web上找到更好的解决方案

编辑：

我认为这是因为形状与布局的大小变化无关，这就是布局的形状看起来拉伸的原因。我更新了我的路径以适合您示例中所需的大小（100*100），希望这对您有所帮助
 我认为您需要更改的是布局的
形状，使其看起来像一个胶囊：

.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;

}

这可能不是最好的解决方案，但它很有效，而且对于
路径来说有点难看，但您可以在web上找到更好的解决方案

编辑：

我认为这是因为形状与布局的大小变化无关，这就是布局的形状看起来拉伸的原因。我更新了我的路径以适合您示例中所需的大小（100*100），希望这对您有所帮助
 如果有人仍在寻找解决方案，可以在此处找到可能的答案：
如果有人仍在寻找解决方案，可以在此处找到可能的答案：
在哪个
节点上应用此效果？在
ImageView
或布局上？不，我现在尝试使用HBox。您必须向包含图像的父元素添加相同的半径。它没有进行任何更改。@Harald My solution可以正确使用HBox，显示您的java代码！在哪个节点上应用此效果？在
ImageView
或布局上？不，我现在尝试使用HBox。您必须向包含图像的父元素添加相同的半径。它没有进行任何更改。@Harald My solution可以正确使用HBox，显示您的java代码！是的，这通常是有效的，但我真的不知道如何修改路径，使其具有与-fx背景半径相同的效果：10px。您的解决方案看起来像-fx背景半径：10%。角被拉长了。这非常好，但是窗口必须可以调整大小。唯一保持不变的是VBox的填充。我希望有一个选项，它允许hbox始终具有相同的半径，而不需要进行扫描。感谢您在我的问题上投入了这么多时间和精力。您可以通过在HBox上添加白色边框来实现类似的效果。让它变得很厚，然后给一个大约75%的边界宽度的负插入，所有这些都需要与半径成比例。所以我尝试了半径60，宽度40和插入-32，结果很好。不过，它可能会对HBox之外的布局元素产生一些古怪的效果。是的，这通常是可行的，但我真的不知道如何修改路径，使其具有与-fx背景半径：10px相同的效果。您的解决方案看起来像-fx背景半径：10%。角被拉长了。这非常好，但是窗口必须可以调整大小。唯一保持不变的是VBox的填充。我希望有一个选项，它允许hbox始终具有相同的半径，而不需要进行扫描。感谢您在我的问题上投入了这么多时间和精力。您可以通过在HBox上添加白色边框来实现类似的效果。让它变得很厚，然后给一个大约75%的边界宽度的负插入，所有这些都需要与半径成比例。所以我尝试了半径60，宽度40和插入-32，结果很好。不过，它可能会对你的HBox之外的布局元素做一些古怪的事情。