css - borderpane javafx中的不同背景

Question

我在父布局 BorderPane 的左侧位置使用 VBox。我想使用一个 css 文件来更改和使用包含我的 VBox 的 BorderPane 左侧的图像背景。我的 ccs 文件中有以下内容，但无法使其正常工作。

 .vbox{
-fx-background-image: url("/ui/image11.jpg");
-fx-background-repeat: no-repeat;
-fx-background-position: center center;
-fx-background-size: 500 500;
}

.root{
-fx-background-color: #ecf0f1;
-fx-background-position: center center;
-fx-background-size: 500 500;
}

.button{
-fx-text-fill: #ecf0f1;
-fx-background-color: #455d7a;
-fx-position: center;
-fx-min-width: 150px;
-fx-transition-duration: 1;
} 

对于这个 css 文件，.root 和 .button 中的规则确实适用，但不适用于 .vbox。如何管理 BorderPane 中不同部分的背景。

我使用以下代码行导入 css 文件:

 scene.getStylesheets().add(this.getClass().getResource("/styles/contentStyle.css").toExternalForm());

这是正确的方法吗？ css 文件在另一个包中。

Answer 1

VBox 没有定义 .vbox 类选择器。解决此问题的一种方法是在您的 VBox 上设置一个名为 .vbox 的样式类，如下所示:
myVBox.getStyleClass().add("vbox");但是如果您希望应用程序中的每个 VBox 都具有该背景，则需要为它们执行此操作。

请参阅有关 HBox 的问题:JavaFX: Styling application with CSS Selectors了解更多信息。