Question

我正在尝试使用JavaFX CSS在按钮中插入图像。虽然，我可以使用＆＃34; -fx-graphic＆＃34; 标签轻松完成，但我无法找到一种方法来调整我想要的大小。

我可以通过以下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按钮 - 如何定义图像的大小？

1 个答案: