Question

我正在尝试提供一些CSS来匹配我在iPhone / Android应用中的风格。我有不透明的交替行颜色，所以我的自定义页面背景渗透。但是，我遇到的问题是我不希望表格单元格中的文本也是不透明的。我希望文本的不透明度为1.0，背景为不透明度= 0.12。请参阅here了解它现在的样子。

下面的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); }

Answer 1

您可以使用rgba颜色作为背景。 opacity会影响子元素，并且没有太多事情可做。

Answer 2

使用rbga背景颜色（CSS3）并在其中设置不透明度。 background-color = rgba（255,255,255,0.12）;

使用正常的不透明度会影响元素的子元素，因此文本只会获得父级不透明度的100％，在这种情况下为0.12

Answer 3

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

父

：z-index:10 为孩子们：z-index:11

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

3 个答案: