Question

我有一个tr opacity: 0.1，td里面的opacity自然会尊重这个td并且会透明。我想知道是否有办法迫使tr不尊重opacity: 1.0的风格并tr { background: #e56a54; width: 100px; opacity: 0.1; } td { opacity: 1.0; font-size: 40px; color: green; }。

＆＃13;

<table>
  <tr>
    <td>
      reshad
    </td>
  </tr>
</table>

＆＃13;

saga

＆＃13;

jsFiddle

Answer 1

我认为最好的方法是将不透明度应用于TR的背景并离开TD。

来自W3schools：

使用opacity属性为背景添加透明度时一个元素，它的所有子元素也变得透明。这可以使文本在完全透明的元素内难以实现读。如果您不想对子元素应用不透明度，请使用RGBA 而不是颜色值（参见＆＃34;更多示例＆＃34;下面）。 http://www.w3schools.com/cssref/css3_pr_opacity.asp

＆＃13;

tr {
  background: rgba(229, 106, 84, 0.1);
  width: 100px;
}
td {
  font-size: 40px;
  color: green;
}

＆＃13;

<table>
  <tr>
    <td>
      reshad
    </td>
  </tr>
</table>

＆＃13;

Answer 2

没有。 td是tr的孩子，所以如果tr是透明的，那么它的所有内容都是透明的。（显然没有像opacity: 2这样的属性来克服孩子的初始不透明度。）

您希望将背景设为透明，或者使用position: absolute; z-index: 1的透明叠加层将保留tr的所有内容，并将z-index: 2添加到td。

强制内部td不要表现得像tr

2 个答案: