个人中心
gpt4 book ai didi

html - 如何使用 html 文本将图像作为绝对位置发送到电子邮件

转载 作者：搜寻专家 更新时间：2023-10-31 08:14:52 26 4
gpt4 key购买 nike

我试图将图像作为绝对位置发送，图像后面有 html 文本，但是当我将它发送到 gmail 或其他电子邮件时，它会显示图像，然后在底部显示 html 文本。绝对 CSS 无效。

下面是模板

<template name="welcome">
<html>
<head>

</head>
<body style="font-family: 'Roboto Slab', serif;">
<div class='container-fluid'>
    <img src="http://qa.couchfashion.com/images/mailer.png" style=" position: relative;width: 100%;left: 0;">

    <div style="top: -44px;position: absolute;z-index: 999999;">
        <div class='mailer-name text-center' >
            <h3 style=" font-size: 80px;"> Hey {{receiverName}} </h3>
        </div>
        <div class="mailer-content" style="margin-top: 120px;
            text-align: center;
            text-align: justify;
            padding-left: 10%;
            padding-right: 10%;">
            <h1 class="text-center"> Welcome to the COUCH </h1>
            <hr>
            <h3 class="text-center"> How To use Couch? </h3>
            <h2 class="text-center"> STEP 1 </h2>
            <h3 class="text-center"> Browse Products &amp; Articles </h3>
            <p>Congratulations ladies! You've successfully made it to the first step of Couch. THis step is the
                easiest
                step. We are sure you will have great time browsing through our products and articles as we get you
                the
                best of them. We make sure best gets the best! </p>

            <h2 class="text-center"> STEP 2 </h2>
            <h3 class="text-center"> Collect things you Love </h3>
            <p>
                Hello again! So here we are on the second step. Well this is easy too. You just have to click on the
                love
                button to collect your favourite products and articles there. And there you go. You have your very
                own
                personalized collection. Woo-Hoo!
            </p>


            <h2 class="text-center"> STEP 3 </h2>
            <h3 class="text-center"> Get Appreciation </h3>
            <p>This is the best step. It will help you flaunt your beautiful talents ladies! People can see your
                closet
                and have a glance at your choice. Isn't that cool? You can promote your style and make it popular.
                Let's
                get started ladies!</p>
            <h3 class="text-center"> Thanks for signing up </h3>
            <h3 class="text-center"> All the Love &amp; Regards </h3>
            <h4 class="text-center"> Team COUCH </h4>
        </div>
    </div>
</div>
</body>
</html>

最佳答案

CSS position大多数电子邮件客户端(relative 和 absolute)都不支持。实现此目的的最佳方法是将图像设为背景图像:

<table role="presentation" aria-hidden="true" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
    <tr>
        <td background="http://qa.couchfashion.com/images/mailer.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
            <div>
                <table role="presentation" aria-hidden="true" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 15%ont-family: sans-serif; font-size: 15px;">

                            >> Place your text layout in tables instead of divs <<

                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

使用 <table> 也更安全s 而不是 <div> s 表示电子邮件，除非 Gmail 是您必须支持的唯一客户端。

关于html - 如何使用 html 文本将图像作为绝对位置发送到电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43412736/

26 4 0
文章推荐： java - 使用 Joda 在两个日期范围之间迭代
文章推荐： java - java中永久和持久的套接字连接
文章推荐： java - WAR文件的主要方法是什么？
文章推荐： html - 什么是文本对齐 : justify-all?
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com