具有图像按钮样式

本文介绍了具有图像按钮样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不知道如何才能实现以下按钮样式，其中文本在JavaFX所在形象底下？

I was wondering How one can achieve following button style where text resides underneath of image in JavaFx?

我想了很多，但一切都是徒劳。任何帮助将是AP preciated。

I tried a lot but all in vain. Any help would be appreciated.

推荐答案

关键是 contentDisplay 属性，将其设置为TOP。

The key is the contentDisplay property, set it to "TOP".

使用FXML：

<Button contentDisplay="TOP" layoutX="101.0" layoutY="51.0" mnemonicParsing="false" text="Button">
  <graphic>
    <ImageView mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
      <image>
        <Image url="@image.png" preserveRatio="false" smooth="false" />
      </image>
    </ImageView>
  </graphic>
</Button>

或CSS：

.your-selector {
    -fx-content-display: top;
}

检查CSS参考

这篇关于具有图像按钮样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！