The above demonstrates background transparency. This was taken virtually verbatim from TheHolierGrail.
Normally a child’s opacity is calculated relative to its parent. This makes it impossible to have an element with a transparent background and fully opaque text (even with nesting and abosolute positioning—go ahead, try it!).
Safari 3 and Firefox 3 implement the propsed CSS3 rgba color notation, allowing you to specify an alpha transparency in a color declaration. Internet Explorer 7 can use a hack based on the propriety gradient filter to achieve the same effect.
View the source to see this in action.
| Browser | Support | Notes |
|---|---|---|
| Safari 3 | ✓ | |
| Firefox 3 | ✓ | |
| Firefox 2 | ◊ | Aliased rounded corners and no transparency |
| Internet Explorer 7 | ◊ | Transparent backgrounds, but no rounded corners |
| IE 6 | ? | Dunno |