WebDev – Creating Opaque backgrounds without affecting Text

by | Mar 22, 2011 | WebDev | 6 comments

In WebDev if you create a cell and set its background and opacity then the elements within the cell will also appear with the same opacity.

This is not great when you want to show text with say a crisp white colour. So how do you produce the effect without affecting the text?

Firstly you need to add an image control, set its Type to Generated.

image

Also make sure that you select “The control can be overlaid” on the image and then add a cell over the text. I usually set a background colour to the image to help me work with it in design.

Add a text control to the cell and set some text. Note that the Cell control also needs to be set as “The control can be overlaid”.

image

Even though you set the background of the image you still need to generate a new background with the opacity. Its easy and only requires a few lines of code.

image

Note that you have to make sure the shape of the background is set to Solid Background for this to work.

Spread the love