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. However, the issue I am having is that I don't want the text in the table cells to also be opaque. I want the text to have a opacity of 1.0 and the background to be an opacity = 0.12. See here for what it looks like now.

CSS below:

html {
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100%;
   background-image: url(../images/mmbg@2x.png);
}
table {
   background-color: transparent;
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 10;
   height: 100%;
   width: 100%;
   border: 0;
   border-collapse: collapse;
}
tr {
   text-align: center;
   padding: 0;
}
td {
   font-family: verdana;
   color: #ffffff;
   text-shadow: 1px 1px 1px #77777777, 2px 2px 7px #ff0000;
   padding: 0;
}
tr:nth-child(odd)    { background-color:#003366; opacity:.12; filter:alpha(12); }
tr:nth-child(even)      { background-color:#6a737d; opacity:.12; filter:alpha(12); }

回答1:

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

回答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

回答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

来源：https://stackoverflow.com/questions/8229113/css3-alternating-table-rows-opacity-affects-text-as-well-as-background

标签

html

css

css3