交替表行不透明度影响文本和背景



我正试图想出一些CSS来匹配我在iPhone/Android应用程序中的样式。我有交替的行色和不透明度,所以我的自定义页面背景渗透。但是,我遇到的问题是,我不希望表格单元格中的文本也是不透明的。我希望文本的不透明度为1.0,背景的不透明度为0.12。现在的样子请看这里

CSS:

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); }

您可以使用rgba颜色作为背景。

opacity将影响子元素,并且没有太多的事情要做。

使用rbga背景色(CSS3)并设置不透明度。background- color = rgba(255,255,255,0.12);

使用普通不透明度会影响元素的子元素,因此文本只是获得父元素的100%不透明度,在本例中为0.12

您也可以尝试将子元素放在父元素的前面,使它们不受父元素不透明度的影响。

为父节点:z-index:10儿童:z-index:11

最新更新