我正在使用netBeans和SceneBuilder创建一个带有一些文本编辑器选项的小窗口。我在屏幕中包含的一个按钮是我根据以下样式修改的colorPicker;
<ColorPicker fx:id="clrFill" layoutX="119.0" layoutY="18.0" prefHeight="30.0" prefWidth="30.0" style="-fx-color-label-visible: false; -fx-color-rect-height: 3; -fx-color-rect-width: 17;" styleClass="button" stylesheets="/css/colorPickerStyle.css" />
这是当前使用的样式表;
.color-picker .color-picker-label .picker-color
{
-fx-alignment : bottom-center;
}
colorPicker.getStyleClass().add("button");
.color-picker{
-fx-background-image: "/gui_resources/fill.png"
-fx-background-size: 20 20;
-fx-background-position: top center;
}
我的目标是在修改后的颜色选择器“矩形”上方显示一个显示当前颜色的图像。最初,我尝试将colorPicker视为Button类,因为我已将样式更改为“按钮”,但我无法使用setGraphic方法放置图像。正如您从css文件中看到的那样,我也试图实现背景图像失败。
Here是我的屏幕目前的副本。 colorPicker位于ComboBox下拉列表旁边。
答案 0 :(得分:1)
如果您尝试更改css文件中的ColorPicker样式类,那将无效,您无法在此处放置代码。
实际上,要使用图像,您不需要更改其样式类,只需使用url(image.png)
(与FXML位于同一文件夹中的图像),或使用FXML的相对路径像url(../image.png)
这样的文件,或者在绝对路径的情况下使用@
。
这应该有效:
.color-picker {
-fx-background-image: url(fill.png);
-fx-background-size: 20 20;
-fx-background-position: top center;
-fx-background-repeat: no-repeat;
}
.color-picker .color-picker-label .picker-color {
-fx-alignment : bottom-center;
}
您可以查看图片here的<uri>
格式。