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

【问题标题】：JavaFX CSS Button with Image - How to define the size of the image?带有图像的 JavaFX CSS 按钮 - 如何定义图像的大小？
【发布时间】：2015-07-17 20:26:39
【问题描述】：

我正在尝试使用 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");
}

【问题讨论】：

我很确定你不能只在 CSS 中做到这一点。如果要指定图像视图的大小，可能需要通过 FXML 或在 java 代码中进行。

标签： css image button javafx fxml

【解决方案1】：

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

注意：我在下面的示例中使用了一个额外的库来使用 svg 文件。

CSS

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

【讨论】：

大多数时候-fx-background-position: center; 可能是首选方式，这是我在您的回答中缺少的部分
您使用什么库使url('*.svg') 与JavaFX 一起工作？阿帕奇蜡染？
@pdem 非常感谢！