0

Right now in my CSS style sheet for JavaFX I have something like this. #myText is a tag in my FXML file. So what appears currently is a black textArea with red text, which is fine. I want to make the background of the textArea transparent (by changing the opacity) but keeping the text a solid color. Adding fx-opacity turns the background as well as my text transparent, so how do I get around this?

#myText{
-fx-background-color:black;
-fx-text-fill: red;
}

#myText .content {
-fx-background-color: black;
}
Timothy Tran
  • 91
  • 3
  • 9

1 Answers1

1

you can use the transparent colour to do that, it is as simple as:

-fx-background-color:transparent;

A useful source to help with more CSS commands is the Oracle JavaFX CSS reference guide

UPDATE

sorry I wasn't aware that you didn't want it fully transparent, in this case you can use:

-fx-background-color: rgba(0,0,0,0.7);

this uses the RGB colour scheme but with the ability to adjust the final value for opacity, being from 0.0 to 1.0, 0.0 obviously being completely transparent and 1.0 being completely shown.

TravisF
  • 459
  • 6
  • 13
  • I've tried using that in both my blocks above. In #myText it doesn't do anything and in .content, it takes away the color entirely, which I assume is it making it transparent, but I want to display what's under the textArea, not just the blank textArea itself. – Timothy Tran Mar 20 '17 at 03:09
  • can you please give us a visual representation of what your trying to achieve? – TravisF Mar 20 '17 at 03:17
  • I have my textArea on top off of an imageView. I want the textArea to be black in color, but somewhat transparent so that the imageView underneath it can be seen. And I want the text not to be transparent at all (normal text colors basically). – Timothy Tran Mar 20 '17 at 03:48
  • 1
    alright, in that case you can use the RGBA (Red Green Blue Alpha) colour version `-fx-background-color: rgba(0, 0, 0, .7);` the final value is the opacity for the colour (it is the same as the opacity in JFX its from 0.0 to 1.0) – TravisF Mar 20 '17 at 04:05
  • Right I've tried using rgba as well, but on 0 opacity the textArea is completely white, rather than showing the imageView underneath. – Timothy Tran Mar 20 '17 at 06:15
  • Ahh so I got it to work using the link fabian marked. Thank you for all the help! – Timothy Tran Mar 20 '17 at 19:47