Question

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/[e-mail]);
}
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); }

Answer 1

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