JavaFX CSS 带有图像的按钮 - 如何定义图像的大小？

Question

我正在尝试使用 JavaFX 在按钮中插入图像 CSS。虽然，我可以使用 "-fx-graphic" 标签轻松完成，但我找不到任何方法来调整图像的大小。

我可以通过以下 FXML 代码执行此操作，其中我将 30 设置为我喜欢的图像宽度，但我想使用纯 CSS 来执行此操作。有什么办法吗？

FXML

<Button text="Press Me">
   <graphic>
      <ImageView fitWidth="30">
        <image>
          <Image url="myImage.png"/>
        </image>
      </ImageView>
   </graphic>
</Button>

CSS

#buttonWithImage {          
    -fx-graphic: url("myImage.png");
}

Answer 1

我遇到了同样的问题并找到了解决方法：我没有使用 -fx-image，而是使用 -fx-background-image.

注意：我在下面的例子中使用了额外的lib来使用svg文件。

CSS

#buttonWithImage { 
    -fx-background-image: url('myimage.svg');
    -fx-background-size: 30px;
    -fx-background-repeat: no-repeat;
    -fx-background-position: 90%;
}

JavaFX CSS 带有图像的按钮 - 如何定义图像的大小？

JavaFX CSS Button with Image - How to define the size of the image?

css

javafx

image

button

fxml