gpt4 book ai didi

html - 是否可以用透明颜色和文本覆盖 tr?

转载 作者:技术小花猫 更新时间:2023-10-29 12:51:42 28 4
gpt4 key购买 nike

晚上好。

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

是这样的: enter image description here

我从 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/

提前致谢。

最佳答案

您可以通过在表格中使用绝对定位的元素来做到这一点。我不知道此解决方案是否支持跨浏览器,并且间距是静态的。

.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>

关于html - 是否可以用透明颜色和文本覆盖 tr?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33858791/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com