Question

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

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

现在图片已经包含了按钮文字，但我发现它非常不优雅，因为每当有一个带有不同文本的新按钮时我都必须创建一个新的按钮图形。通过代码设置按钮的文本（如mybutton.setText("Text");）只会显示按钮旁边的文字。

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

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

在这种情况下有任何建议吗？

Answer 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无法完成的。

（JavaFX 8）图形顶部的按钮文本

1 个答案: