在 HTML 或 Img 标记上的文本中为 TD 赋予形状答案

【问题标题】：Give shape to TD in HTML or Text over Img tag在 HTML 或 Img 标记上的文本中为 TD 赋予形状
【发布时间】：2015-03-18 03:26:28
【问题描述】：

我要实现，

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

我写的代码是这样的，

  <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文件，

提前致谢。

【问题讨论】：

无法塑造单元格的边框。您在正确的轨道上使用背景图像。只需将单元格的背景图像设置为您的图像，并为单元格提供固定的宽度/高度（与图像的大小完全匹配）。
或者，您可以先尝试一下，然后将图像的位置设置为绝对位置，如下所示：jsfiddle.net/skwkwfy3/3
@JamesGaunt 我尝试过但未能使其与 IE 一起使用。所有方法都适用于除 IE 之外的所有其他浏览器。

标签： javascript html css css-shapes

【解决方案1】：

您可以使用Pseudo-element 和激活类

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>

【讨论】：

不错。比图片更好。
是的！你删除了所有讨厌的内联样式和不推荐使用的属性！
@Tambo 我试过了，它适用于除 IE 之外的浏览器。顺便说一句，这是非常酷的溶胶。你能提供一些适用于所有浏览器的 sol。
这也应该在 IE 中工作。您确实应该提及您正在谈论的版本。它们在功能和标准合规性方面差异很大。
真的吗？当前落后4个版本？甚至 Windows XP 也容忍 IE8，并且不再支持 XP。这只是...... ick。

【解决方案2】：

您无法调整表格单元格的形状。您可能希望将图像用作背景并将 size 属性设置为 cover 或 contain：

td.bubble {
    background-image: url(http://i.stack.imgur.com/ommAw.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    height: 50px;
}

<table width="100%" style="color: blue; margin-top: -3;margin-bottom: -3;">
    <tbody>
        <tr>
            <td align="center" style="font-weight:bolder;" background="" class="bubble" valign="top">
               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>

调整大小以适应。

【讨论】：

我试过这个溶胶，但它显示的不是气泡，而是填充橙色。我必须减小这个 img 的大小吗？
您是否完全按照我的方式使用了 CSS？使用 background 速记属性打破了这种技术。
我认为它不适用于 IE。我们可以有溶胶吗？哪个适用于所有浏览器？
当然可以与 IE 一起使用——至少是最新的 3 个版本。 caniuse.com/#search=background-size