在时事通讯中将图像放在桌面边框顶部

Question

我设计了一个简报模板，我想添加一个细节。作为两个表格/内容块之间的分隔符，我想添加一个指向即将到来的表格的箭头。我已经为桌子添加了一个带有颜色的边框顶部，并且在中心我喜欢用箭头（图像）来打破边框，但是我只能让图像对齐到顶部而不是重叠它这是我理想的做法。

表格具有不同的背景颜色，跨越整个视口，分隔符应该相同。布局也很敏感。

以下是我使用的代码。在限制和兼容性方面，我甚至可以在简报中提出这个问题吗？

这是我的结果： http://jsfiddle.net/qyzq4bvb/

这就是我想要做的事情：

<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
 <tr>
  <td align="center" valign="top">
    <img src="http://img.jpg" alt="arrow" width="49" height="24" />
  </td>
 </tr>
</table>

#divider{border-top:3px solid; border-color:#63A700; width:100%; background-color:inherit;}

Answer 1

您可以尝试在position: relative上使用img，如下所示。

您可能需要对图像进行微调，以清理左/右边缘，以实现更加无缝的叠加。 .png文件可能效果更好，因为.jpg的颜色看起来不太合适（压缩？）。但是，这个想法会起作用。

您可能需要为图像添加白色顶部边框。请注意，此类像素精度定位可能对跨浏览器效果很敏感。

＆＃13;

＆＃13;

#divider {
  border-top: 3px solid;
  border-color: #63A700;
  width: 100%;
  background-color: inherit;
}
#divider td {
  text-align: center;
}
#divider td img {
  display: inline-block;
  position: relative;
  top: -4px;
  border-top: 1px solid white;
}

＆＃13;

<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
  <tr>
    <td>
      <img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/arrow.jpg" alt="arrow" width="49" height="24" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;