Search code examples
javaimagejavafxtransparencyfxml

FXML Image Transparency

I am trying to accomplish two goals.

  1. Have the image transparent in regards to the text.

  2. Not have the image squish the text to the right.

      <Button fx:id="btn" layoutX="90.0" layoutY="14.0" mnemonicParsing="false" prefHeight="97.0" prefWidth="320.0" styleClass="root" text="Button">
    <graphic>
        <ImageView fitHeight="87.0" fitWidth="244.0">
            <image>
                <Image url="@image.jpg"/>
            </image>
        </ImageView>
    </graphic>
</Button>

Any help is appreciated greatly.

Solution

  • Set the contentDisplay property to ContentDisplay.CENTER. This should draw the text on top of the graphic used with the Button:

    <Button fx:id="btn" contentDisplay="CENTER" ...>
    ...
</Button>