gpt4 book ai didi

javascript - 在 HTML 或 Text over Img 标签中赋予 TD 形状

转载 作者:行者123 更新时间:2023-11-28 04:52:42 25 4
gpt4 key购买 nike

我要实现,

enter image description here

到目前为止我已经实现了,

enter image description here

我写的代码是这样的

  <html>
<body>
<hr color="#FFCC66"/>
<table width="100%" style="color: blue; margin-top: -3;margin-bottom: -3;">
<tbody>
<tr>
<td align="center" style="font-weight:bolder;"
background="" valign="top">
<img src="cellbackground.png" width="100%" height="100%" alt="" />
Who You Are
</td>
<td align="center" style="font-weight:bolder; z-index:1; ">
<div style="height:100%; width:100%;
background-origin : content;
background-size:100%;
background-image:url(cellbackground.png) ">
Applicant's Needs
</div>
</td>

<td align="center" style="font-weight:bolder;">
Background Information
</td>
</tr>
</tbody>
</table>
<hr color="#FFCC66"/>
</body>
</html>

如果有更好的方法来实现这个,那么请提出建议,如果我们可以为表格的单元格边框赋予形状,那么这是非常好的方法。

重点是实现应该支持几乎所有的浏览器。

和cellbackground.png文件,

enter image description here提前致谢。

最佳答案

您可以使用 Pseudo-element和类(class)活跃

table{
border-top: 2px solid #ff6600;
border-bottom: 2px solid #ff6600;
width: 100%;
color: blue;
margin-top: -3px 0;
padding: 10px 0
}

table td{font-weight:bolder;
text-align: center;
vertical-align: top;
position: relative;
border-radius: 6px;
padding: 10px 0;
}
table td.active{
background: #ff6600;
color: white
}
table td.active:before{
content: '';
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ff6600;
top: 100%;
left: 50%;
margin-left: -5px;
}
<html>
<body>
<table>
<tbody>
<tr>
<td class=active>
Who You Are
</td>
<td>
Applicant's Needs
</td>

<td>
Background Information
</td>
</tr>
</tbody>
</table>
</body>
</html>

关于javascript - 在 HTML 或 Text over Img 标签中赋予 TD 形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29107631/

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