背景颜色叠加在 Chrome 中的表 tr 上不起作用

Question

我有一张桌子，我正在

tr

上显示叠加层。它不适用于 Chrome，但适用于 Firefox。

我想在

tr

上叠加背景。我尝试了下面的代码，但我在 Chrome 上遇到了这个问题。我已经更新了两个浏览器。

在 Firefox 中我得到输出：

在 Chrome 中，我得到输出：

<html>

<head>

  <style>
    tr.sec_activities {
      position: relative;
    }
    
    tr.sec_activities:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.6);
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>adasd</th>
        <th>asdasd</th>
        <th>asdasd</th>
      </tr>
    </thead>
    <tbody>
      <tr class="sec_activities">
        <td>sadsadasdad</td>
        <td>dsfsfs</td>
        <td>ajsdkaskdjajd</td>
        <td>adklasdlja</td>
      </tr>
      <tr class="sec_activities">
        <td>sadsadasdad</td>
        <td>dsfsfs</td>
        <td>ajsdkaskdjajd</td>
        <td>adklasdlja</td>
      </tr>

      <tr class="sec_activities">
        <td>sadsadasdad</td>
        <td>dsfsfs</td>
        <td>ajsdkaskdjajd</td>
        <td>adklasdlja</td>
      </tr>

    </tbody>
  </table>



</body>

</html>

接下来我可以尝试什么？

Answer 1

而不是

 tr.sec_activities {
     position: relative;
 }

将其更改为位置：绝对；。

 tr.sec_activities {
     position: absolute;
 }

这应该可以解决这个问题并使两个浏览器的输出相同。

片段：

<html>

<head>

  <style>
    tr.sec_activities {
      position: absolute;
    }
    
    tr.sec_activities:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.6);
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>adasd</th>
        <th>asdasd</th>
        <th>asdasd</th>
      </tr>
    </thead>
    <tbody>
      <tr class="sec_activities">
        <td>sadsadasdad</td>
        <td>dsfsfs</td>
        <td>ajsdkaskdjajd</td>
        <td>adklasdlja</td>
      </tr>
    </tbody>
  </table>



</body>

</html>

背景颜色叠加在 Chrome 中的表 tr 上不起作用

问题描述投票：0回答：1

1个回答

最新问题

背景颜色叠加在 Chrome 中的表 tr 上不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1