I am trying to insert an image in a button using JavaFX CSS. Although, I can do it easily using the "-fx-graphic" tag, I cannot find a way to resize the image in whatever size I want.
我试图使用JavaFX CSS在按钮中插入图像。虽然,我可以使用“-fx-graphic”标签轻松完成,但我无法找到一种方法来调整我想要的任何大小的图像。
I can do this through the following FXML code, where I give 30 to my preferred width of image, but I would like to do this with pure CSS. Is there any way to do that?
我可以通过以下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");
}
1 个解决方案
#1
I had the same problem and found a workaround: instead of using -fx-image
, I use -fx-background-image
.
我有同样的问题,并找到了一个解决方法:而不是使用-fx-image,我使用-fx-background-image。
Note: I use an additional lib to use svg file in the following example.
注意:在以下示例中,我使用其他lib来使用svg文件。
CSS
#buttonWithImage {
-fx-background-image: url('myimage.svg');
-fx-background-size: 30px;
-fx-background-repeat: no-repeat;
-fx-background-position: 90%;
}
#1
I had the same problem and found a workaround: instead of using -fx-image
, I use -fx-background-image
.
我有同样的问题,并找到了一个解决方法:而不是使用-fx-image,我使用-fx-background-image。
Note: I use an additional lib to use svg file in the following example.
注意:在以下示例中,我使用其他lib来使用svg文件。
CSS
#buttonWithImage {
-fx-background-image: url('myimage.svg');
-fx-background-size: 30px;
-fx-background-repeat: no-repeat;
-fx-background-position: 90%;
}