个人中心
gpt4 book ai didi

html - 时事通讯在 Outlook 中损坏

转载 作者：行者123 更新时间：2023-11-28 16:54:26 24 4
gpt4 key购买 nike

我无法让背景图像在 Outlook HTML 新闻稿中工作。我尝试了防弹方法，但它没有正常工作!

请检查我的代码，看看您是否有任何想法如何在 Outlook 中正确显示 3 个不同的背景图像。这就是我目前所拥有的(除了 Outlook，它在任何地方都可以完美运行)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
    <head>
        <title>E-mail newsletter</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">            
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport">
        <style type="text/css">

/* Reset */
body { margin: 0px; padding: 0px; background-color: #FFFFFF; }

::selection {
background: #ff2f2f; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ff2f2f; /* Gecko Browsers */
}

/* Responsive */
@media only screen and (max-width:600px) {

/* Tables
parameters: width, alignment, padding */

table[class=scale] { width: 100%!important; }
table[class=scale-300] { width: 100%!important; height: 300px!important; }
table[class=scale-90] { width: 90%!important; }

/* Td */
td[class=hide] { display: none!important; height: 0px!important; }
td[class=scale-left] { width: 100%!important; text-align: left!important;}
td[class=scale-height] { height: 70px!important;}
td[class=scale-left-bottom] { width: 100%!important; text-align: left!important; padding-bottom: 24px!important; }
td[class=scale-left-top] { width: 100%!important; text-align: left!important; padding-top: 24px!important; }
td[class=scale-left-all] { width: 100%!important; text-align: left!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center] { width: 100%!important; text-align: center!important;}
td[class=scale-center-both] { width: 100%!important; text-align: center!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-bottom] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; }
td[class=scale-center-top] { width: 100%!important; text-align: center!important; padding-top: 24px!important; }
td[class=scale-center-all] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-right] { width: 100%!important; text-align: right!important;}
td[class=scale-right-bottom] { width: 100%!important; text-align: right!important; padding-bottom: 24px!important; }
td[class=scale-right-top] { width: 100%!important; text-align: right!important; padding-top: 24px!important; }
td[class=scale-right-all] { width: 100%!important; text-align: right!important; padding-top: 24px!important; padding-bottom: 24px!important; }

td[class=scale-center-bottom-both] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-top-both] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=reset] { height: 0px!important; }
td[class=scale-center-topextra] { width: 100%!important; text-align: center!important; padding-top: 84px!important; }

img[class="reset"] { display: inline!important; }
img[class="scale-80"] { width: 80%!important; }

}


    </style>
</head>
<body>

<table class="scale" data-bgcolor="Body BG" data-module="Header" style="background-color: rgb(255, 255, 255); position: relative; opacity: 1; top: 0px; left: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

    <tr>
                            <td align="center" style="color:#444444; font-family:Helvetica, Verdana, Arial, sans-serif; font-size:13px;  padding:50px 0px 20px 0;">
                                Can't see the offer? Click <a href="http://webpage.com" style="color: rgb(219, 0, 19);">here</a>!                               </td>
                        </tr>       
    <tr>
        <td>
            <table class="scale" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-image: url(&quot;http://s30.postimg.org/s36pgisoh/bg1.jpg&quot;);" data-bg="Quote BG" align="center" height="340" background="http://s30.postimg.org/s36pgisoh/bg1.jpg" border="0" cellpadding="0" cellspacing="0" width="620">
                <tr>
                    <td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s10.postimg.org/u2e99laih/cut_top.png">
                        &nbsp;                      </td>
                </tr>
                <tr>
                    <td align="center">
                        <table class="scale" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
                            <tr>
                                <td height="50">
                                    &nbsp;                                  </td>
                            </tr>

                            <tr>
                                <td data-color="Header Headline" data-max="64" data-min="16" data-size="Header Headline" style="font-family: &quot;Proxima N W01 At Smbd&quot;,Helvetica,Arial,sans-serif; font-size: 29px; color: rgb(255, 255, 255); line-height: 42.05px;" align="center">BEST OFFER HERE!<br><br><span data-color="Header Subline" data-max="50" data-min="16" data-size="Header Subline" style="font-size: 38px; line-height: 38px; color: rgb(255, 255, 255);">STARTS FROM <strong>35 EUR</strong>!</span>
                                </td>
                            </tr>
                            <tr>
                                <td height="40">
                                    &nbsp; </td>
                            </tr>
                            <tr>
                                <td style="color: rgb(255, 255, 255); font-size: 15px; line-height: 25.5px;" data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" align="center"><a data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" data-bgcolor="Header Button" href="http://webpage.com" style="background-color: rgb(219, 0, 19); border-radius: 40px; padding: 10px 30px; color: rgb(255, 255, 255); font-family: &quot;Proxima N W01 At Smbd&quot;,Helvetica,Arial,sans-serif; text-decoration: none; font-size: 15px; line-height: 25.5px;">ORDER NOW&nbsp;<img src="http://s11.postimg.org/nk238dn6n/nool.png" height="10px" width="11px" alt=""></a>
                                </td>
                            </tr>
                            <tr>
                                <td height="50">
                                    &nbsp;                                  </td>
                            </tr>
                        </table>

                    </td>
                </tr>
                <tr>
                    <td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s27.postimg.org/f9g57wpgz/cut_down.png">
                        &nbsp;                      </td>
                        </td>
                            </tr>
                        </table></tr>
            </table></body></html>


                                                                                                                                </body></html>

最佳答案

Outlook 不支持

background-image，对不起。

在这里查看电子邮件客户端中的 css 兼容性:https://www.campaignmonitor.com/css/

在电子邮件中使用 html 和 css 非常非常困难。每个阅读您电子邮件的电子邮件客户端都将有自己的规则来处理 HTML 电子邮件，因此您将不得不为最小公分母进行设计。

关于html - 时事通讯在 Outlook 中损坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32368281/

24 4 0
文章推荐： javascript - 三元运算符检查返回0，同时检查jsx react js
文章推荐： 出现在图像后面的 CSS 下拉菜单
文章推荐： javascript - 隐藏和显示功能在 jquery 中不起作用
文章推荐： python - 使用 ECF 与 Python 共享编辑
行者123
个人简介

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

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