Непрозрачность переменных строк таблицы CSS3 влияет как на текст, так и на фон

Question

Я пытаюсь придумать немного 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); }

Answer 1

Вы можете использовать rgba цвета в качестве фона.opacity повлияет на дочерние элементы, и с этим ничего не поделаешь.

Answer 2

Можно также попытаться поместить дочерние элементы перед родительским элементом, чтобы сделать их незатронутыми из-за непрозрачности родителя.

для родителя: z-index:10 для потомков: z-index:11

Answer 3

Используйте цвет фона rbga (CSS3) и установите непрозрачность в нем.background-color = rgba (255,255,255,0.12);

Использование обычной непрозрачности влияет на дочерние элементы элемента, поэтому текст просто получает 100% непрозрачности родителей, что в данном случае составляет 0,12