CSS3 Alternating Table Rows Opacity Affects Text As Well As Background

I am trying to come up with some CSS to match a style I have in my iPhone/Android apps. I have alternating row colors with opacity so my custom page background bleeds through. Ho

Solution 1:

You can use rgba colors as background. opacity will affect child elements and there's not much to do about it.

Solution 2:

Use rbga background colour (CSS3) and set the opacity in that. background-colour = rgba(255,255,255,0.12);

Using normal opacity affects the children of the element, so the text just gets 100% of the parents opacity, which in this case is 0.12

Solution 3:

You can also try to put the child elements in front of the parent element to make them un-affected from the parent's opacity.

for the parent: z-index:10 for the children:z-index:11