Question

我正在尝试构建一个电子邮件html模板。我想在图像上写文字，图像应该在页面的中心。但不是背景。我已经尝试了我的电子邮件模板，但文本也位于图像下方，如果我使用图像作为背景，它不会显示在电子邮件中。如何在Image上为电子邮件html模板编写文本。请帮忙！

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
            position: relative;
        }

        p {
            position: absolute;
            font-family: sans-serif;
            top: 122px;
            left: 50px;
            width: 53%;
            font-size: 15px;
        }

        div {
            max-width: 900px;
            width: 900px;
            margin: 0 auto;
            position: relative;
        }
    }
    </style>
</head>
<body>
    <div>
        <img src="http://[imageurl]" width="900">
        <p>Dear …………………………………,
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem optio voluptatibus totam commodi quos, eveniet, voluptate nesciunt voluptatum aliquid ipsam. Placeat atque nulla cupiditate, nemo unde incidunt eos accusantium laboriosam?</p>
    </div>
</body>
</html>

Answer 1

就像这样？

public function getDelete($id)
{
 echo $id;
}

根据您的需要调整图像大小。

希望它有效。

PS：尽量不要使用<table align="center"> <tbody> <tr align="center"> <td height="10" valign="top" align="center" style=" background: url(http://www.freeiconspng.com/uploads/faiths-speak-on-referendums-17.png); background-size:400px 100px; background-position: center; background-repeat: no-repeat;"> <p style="color: black; text-align: center; font-weight:100 !important; text-transform: uppercase; font-style: normal; letter-spacing: 1px; font-size: 10px; line-height:30px; font-family: 'open sans', arial, sans-serif;">Saturday 5TH MARCH, 2016</p> </td> </tr> </tbody> </table>属性，因为它无法在 gmail 和 outlook 电子邮件引擎中使用。

点击此链接：HTML Email

Answer 2

在图片上使用position: absolute;和<p>，并将<p>宽度设置为足够小的百分比以适合图片。

请参阅我的JSFiddle了解样本。

在小提琴上进行的更改

所以我在原版中添加了更多的想法（已经解释了如何使文本与图像重叠）。

让图像和主要容器包裹<p>，然后将图像包装在自己的容器中。
在<p>与图像重叠之后，请确保将其宽度设置为与图像尽可能短且成比例，并添加一些填充以使其更加居中，同样证明它的合理性如果你愿意的话。

关于它。创建起来非常简单。您可以查看并查看小提琴，看看它是如何工作的。

Html电子邮件：文字覆盖图像

2 个答案: