时间戳

首页 > 解决方案 > 在 Html for Email 中将两个圆角矩形框重叠在一起

html-email - 在 Html for Email 中将两个圆角矩形框重叠在一起

问题描述

我正在尝试为电子邮件编写 Html 代码，以便将两个框重叠在一起（它们不在表格中，我想在表格中处理电子邮件会更好）。或者可能重叠两个表以使框重叠。第一个盒子包含蓝色，第二个盒子包含白色，我想在上面写文字（我的意思是只在白色盒子上写文字）。这些盒子是圆角矩形。

然后是重叠的圆角矩形框下方的矩形框。在这个矩形盒子上，它的一个边上有一个用蓝色填充的单边盒子，我可以在上面写几个字，也可以在主矩形盒子上写。

这就是我一般打算做的事情。（https://i.stack.imgur.com/qgs0H.jpg）

对于 Nathan 给我的代码，我尝试创建一个盒子顶部和底部的图片，并在其中添加一个垂直线条的文本主体，但是所有四个点都没有连接在一起，整个盒子很明显有些路口打开。这就是我能够用代码做的事情。（https://i.stack.imgur.com/Q4vBY.jpg）

但仔细一看，分数并没有达到。他们没有在 4 个点/角处加入。如果他们可以加入，那么我认为没问题。谢谢你们。我非常感谢

标签： html-email

解决方案

我不确定是否有跨电子邮件兼容的解决方案（在此处阅读一个已弃用的解决方案：https ://www.emailonacid.com/blog/article/email-development/tutorial-css-fixed-positioning-in-interactive -电子邮件/）。

我会尝试以下方法，将顶部圆形区域制作为一张图片，将侧面制作为边框，然后将底部圆形部分制作为另一张图片。

<body>
  <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;">
    <tr>
      <td style="padding:0;border-collapse:collapse;">
        <img src="top-part.jpg" width="100%" style="width:100%;border:0;" />
      </td>
    </tr>
    <tr>
      <td style="border-left:1px solid #000;border-right:1px solid #000;padding:0;border-collapse:collapse;">
        <p>Main content here</p>
      </td>
    </tr>
    <tr>
      <td style="padding:0;border-collapse:collapse;">
        <img src="bottom-part.jpg" width="100%" style="width:100%;border:0;" />
      </td>
    </tr>
  </table>
</body>

或者，您可以尝试将其全部设为背景图像，并查阅https://www.litmus.com/blog/the-ultimate-guide-to-background-images-in-email/和相关内容。

推荐阅读