Question

晚上好。

我想问一下，是否可以用一些透明的颜色和文字覆盖表格行？

这样的事情：

我从stackoverflow发现它可以覆盖使用css，但从未设法让它工作。

如果可能的话，也许有人可以指出我正确的方式。

例如，如何使用透明颜色和文本覆盖中间表行：

<body>

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

</body>

https://jsfiddle.net/gx2vpm62/？

提前致谢。

Answer 1

您可以通过在表格中使用绝对定位的元素来完成此操作。我不知道这个解决方案的跨浏览器支持，间距是静态的。

.overlay {
  position: absolute;
  background: rgba(255,0,0,0.7);
  left: 0.7em;
  right: 0.7em;
  height: 1.2em;
  text-align: center;
}

tr {
  position: relative;
}

<body>
  <table border="1" style="width:100%">
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td class="overlay">Text</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>
</body>

Answer 2

它甚至可以通过纯CSS来实现这一点，但是可以使它完美对齐有点笨拙。试试这个：

＆＃13;

table {
border-collapse: separate;
border-spacing: 0;
border-color: transparent;
overflow: hidden;
}
td {
position: relative;
height: 1.5em;
padding: 0;
border-color: transparent;
}
td:first-child {
width: 40%;
position: relative;
}
td:nth-child(2) {
width: 40%;
}
td:nth-child(3) {
width: 20%;
}
.overlay td:first-child:after {
position: absolute;
z-index: 1;
display: block;
text-align: center;
left: 0;
top: 0;
width: 252%;
height: 1.5em;
content:"text";
background-color: rgba(255, 0, 0, .7);
color: white;
}

＆＃13;

<body>

  <table border="1" style="width:100%">
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr class="overlay">
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>

</body>

＆＃13;

更新现在也应该可以在Chrome中运行，但我真的没有尝试让它在这个星球上的每个浏览器中运行，所以在再次向我推断之前请记住这一点。我只是想帮忙。

其他技巧涉及在:after上应用td规则，而不是tr。但你必须知道td的相对宽度来计算叠加层的总宽度，然后你仍然不能得到与表格匹配的精确宽度。因此，略微超过＆＃34;和overflow:hidden来掩盖这个问题。

是否可以用透明的颜色和文字覆盖tr？

2 个答案: