在时事通讯的 table border-top 上方放置图像

Question

我设计了一个时事通讯模板，我想补充一个细节。作为两个 tables/content 块之间的分隔线，我想添加一个指向即将到来的 table 的箭头。我在 table 上添加了一个带有颜色的 border-top 并且在中心我想要箭头（图像）打破边界，但我只能让图像与顶部对齐而不是重叠它，这是我理想中想要做的。

tables 有不同的背景颜色，跨越整个视口，分隔线应该做同样的事情。布局也是响应式的。

这是我用过的代码。就限制和兼容性而言，我在时事通讯中问的问题是否可能？

这是我的结果： 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

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

您可能需要对图像进行细微调整以清理 left/right 边缘以获得更无缝的叠加效果。 .png 文件可能效果更好，因为 .jpg 的颜色看起来不太正确（压缩？）。但是，这个想法会奏效。

您可能需要为图片添加白色上边框。请注意，这种像素精度定位可能对跨浏览器的影响很敏感。

#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;
}

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

在时事通讯的 table border-top 上方放置图像

Placing an image over table border-top in a newsletter

html

css

newsletter