JavaFX - Добавить изображение в ColorPicker

Question

Я использую 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 «прямоугольник», который отображает текущий цвет. Первоначально я пытался рассматривать colorPicker как класс Button, так как я изменил стиль на «кнопку», но мне не удалось разместить изображение с помощью метода setGraphic. Как вы можете видеть из файла css, я также попытался выполнить фоновое изображение безуспешно.

Here - это копия того, как выглядит мой экран. ColorPicker расположен рядом с выпадающим списком ComboBox.

Answer 1

Если вы пытались изменить класс стиля ColorPicker внутри файла css, это не сработает, вы не можете разместить там код.

На самом деле, чтобы использовать изображение, вам не нужно менять его стиль, вам просто нужно использовать 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; 
} 

Вы можете проверить формат <uri> для изображения here.