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

我要实现，

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/

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

上一篇：javascript - 如何从 Javascript 函数将参数传递给 XSLT

下一篇：html - 圆像方