Semi transparent colour for div element

HTML & CSS
1

Hi everyone,

I wondered if anyone could tell me the css rule to set the background colour of a div to a semi-transparent colour. It would need to work across as many browsers as possible.

I’d really appreciate any help.

Thanks in advance.

2

Hi,

For ie9+ you can use rgba to alter the opacity of the background-color.

e.g.


.test{
background:#000;/* fallback for older browsers using just a solid colour*/
background:rgba(0,0,0,0.3);
}

The first three numbers are the rgb value (e.g. black = 000) the 4th number is a decimal between 0 - 1 that adjust the opacity from zero to full opacity.

If you need to support older browsers then the easiest option is just to use a semi transparent png image instead and repeat that on the background. You can’t really use the opacity property either as that makes the content transparent also which is not what is usually required (although there are some workarounds but are too much effort to make it work nicely).

See this article on CSS tricks for more info.

3

Thanks so much for this. I had a look at the article also and it was good to know that there is a workaround for ie8. Will it mean that ie7 and earlier won’t render the backup colour and if yes, what will happen to the colour of the element in those browser versions?

4

All browsers that don’t understand rgba (barring bugs mentioned) will get the fallback rule and display the solid color you have set. Browsers that do understand rgba will just use the last rule as that over-rides the previous background rule.

5

Ok great - thanks for explaining