Make the opacity in module the background not text or images

Question

How do I go about making the text in a module not affected by the opacity for the white background.

For example on this page.

http://www.webbmaster.com.au/web-programs/questdesign/index.php/services

In this page I would like the text and 3 images to not be affected by the opacity only the white background.

Answer 1

In your template.css replace:

.servpricing {
background: #FFF;
color: #000;
opacity: 0.3;
filter: alpha(opacity=20);
}

with:

.servpricing {
background: #fff; // Left as a fallback for older browsers
background: rgba(255,255,255,.3); // transparent white
color: #000;
}

Answer 2

you can use this css for transparent backgrounds only

background: rgba(255, 255, 255, 0.7);

Answer 3

To have a white background only with an opacity, use the following:

background: rgba(255, 255, 255, 0.3);
background: url(../images/transparent_white.png) repeat;

255, 255, 255 are the rgb values for white and 0.3 is the level of transparency. I've also included a fallback image for older browsers that do not support rgba. If you want to keep it, you will of course have to create the transparent png and possibly the path of it.

Hope this helps