我正试图想出一些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