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

jav*_*uns 9 css javafx image button fxml

我试图使用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>
Run Code Online (Sandbox Code Playgroud)

CSS

#buttonWithImage {          
    -fx-graphic: url("myImage.png");
}
Run Code Online (Sandbox Code Playgroud)

pde*_*dem 11

我有同样的问题,并找到了一个解决方法:而不是使用-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%;
}
Run Code Online (Sandbox Code Playgroud)

  • 在大多数情况下,-fx-background-position:center;可能是首选方式,这是我在回答中遗漏的部分 (2认同)