(JavaFX 8) 图形顶部的按钮文本答案

【问题标题】：(JavaFX 8) button text on top of graphic(JavaFX 8) 图形顶部的按钮文本
【发布时间】：2017-11-18 15:27:41
【问题描述】：

我使用 CSS 将图像设置为带有此按钮的按钮（示例）：

#button-id {
    -fx-background-color: transparent;
    -fx-graphic: url("/main/img/mybutton.png");

现在图像已经包含按钮文本，但我觉得这很不雅，因为每次有一个带有不同文本的新按钮时，我都必须创建一个新按钮图形。通过代码设置按钮的文本（如mybutton.setText("Text");）只显示按钮旁边的文本。

对节点使用-fx-background-image: url("myurl"); 会显示奇怪地平铺的图像，而不是缩放到原始大小的单个图像。手动设置大小也很不舒服。

在图像和按钮本身之间使用窗格对我来说看起来不是很优雅。我真的希望有一个更好更简单的解决方案。

在这种情况下有什么建议吗？

【问题讨论】：

标签： java css button javafx-8

【解决方案1】：

您可以使用-fx-background-repeat 和-fx-background-size 属性来避免平铺背景图像：

#button-id {
    -fx-background-image: url("/main/img/mybutton.png");
    -fx-background-repeat: no-repeat;
    -fx-background-size: contain;
    ...
}

AFAIK 除了使用 StackPane 将图像与文本堆叠在一起之外，没有其他方法可以将图像和文本作为子元素作为图形，而这无法使用 CSS 完成。

【讨论】：

我完全错过了这些属性，非常感谢你！