Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/72.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Outlook HTML时事通讯:文本覆盖透明图像覆盖图像_Html_Css_Outlook_Newsletter_Vml - Fatal编程技术网

Outlook HTML时事通讯:文本覆盖透明图像覆盖图像

Outlook HTML时事通讯:文本覆盖透明图像覆盖图像,html,css,outlook,newsletter,vml,Html,Css,Outlook,Newsletter,Vml,我正在尝试创建一个在Outlook中工作的时事通讯 它应该是这样的(在浏览器或好的电子邮件客户端中也是如此): 但在2019年展望中看起来: 两个问题: 透明背景图像为白色,覆盖文本和图像 第二个透明背景图像被完全忽略 HTML代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-

我正在尝试创建一个在Outlook中工作的时事通讯

它应该是这样的(在浏览器或好的电子邮件客户端中也是如此):

但在2019年展望中看起来:

两个问题:

  • 透明背景图像为白色,覆盖文本和图像

  • 第二个透明背景图像被完全忽略

  • HTML代码:

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <style>
          /* Reset */
          * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
          }
    
          a,
          a:focus,
          a:hover {
            color: inherit;
            outline: 0;
            text-decoration: none;
          }
    
          /* General */
          body {
            color: #ffffff;
            font-family: 'Open Sans', 'Roboto', 'Segeo UI', Arial, sans-serif;
            font-size: 16px;
          }
    
          a {
            color: #ffffff;
            text-decoration: underline;
          }
    
          .spacer-5 {
            height: 5px;
          }
    
          .spacer-10 {
            height: 10px;
          }
    
          /* Section */
          .heading {
            color: #000000;
            font-size: 28px;
            font-weight: bold;
            max-width: 1160px;
            margin-bottom: 5px;
            padding: 10px 10px 10px 40px;
          }
    
          .content {
            color: #000000;
            font-weight: 600;
            max-width: 1160px;
            padding: 10px 10px 10px 40px;
          }
    
          .content a {
            color: #000000;
          }
        </style>
        <title>Newsletter</title>
      </head>
      <body>
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td></td>
            <td width="1200">
              <table class="section" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td background="https://i.ibb.co/WDCt928/img-1.png" bgcolor="#dddddd" valign="top" style="background-size:cover;">
                    <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:1200px;">
                      <v:fill type="tile" size="100%,100%" src="https://i.ibb.co/WDCt928/img-1.png" color="#dddddd" />
                      <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                    <![endif]-->
                    <div>
                      <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                          <td class="spacer-10" colspan="2"></td>
                        </tr>
                        <tr>
                          <td background="https://i.ibb.co/TYkzN4c/transparent.png" class="heading" valign="top">
                            <!--[if gte mso 9]>
                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                              <v:fill type="tile" src="https://i.ibb.co/TYkzN4c/transparent.png"/>
                              <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                            <![endif]-->
                            <div>
                              Lorem ipsum dolor sit amet
                            </div>
                            <!--[if gte mso 9]>
                              </v:textbox>
                            </v:rect>
                            <![endif]-->
                          </td>
                          <td width="40"></td>
                        </tr>
                        <tr>
                          <td class="spacer-5" colspan="2"></td>
                        </tr>
                        <tr>
                          <td background="https://i.ibb.co/TYkzN4c/transparent.png" class="content">
                            <!--[if gte mso 9]>
                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                              <v:fill type="tile" src="https://i.ibb.co/TYkzN4c/transparent.png"/>
                              <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                            <![endif]-->
                            <div>
                              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                            </div>
                            <!--[if gte mso 9]>
                              </v:textbox>
                            </v:rect>
                            <![endif]-->
                          </td>
                          <td width="40"></td>
                        </tr>
                        <tr>
                          <td class="spacer-10" colspan="2"></td>
                        </tr>
                      </table>
                    </div>
                    <!--[if gte mso 9]>
                      </v:textbox>
                    </v:rect>
                    <![endif]-->
                  </td>
                </tr>
              </table>
            </td>
            <td></td>
          </tr>
        </table>
      </body>
    </html>
    
    
    /*重置*/
    * {
    框大小:边框框;
    保证金:0;
    填充:0;
    }
    A.
    答:焦点,
    a:悬停{
    颜色:继承;
    大纲:0;
    文字装饰:无;
    }
    /*一般的*/
    身体{
    颜色:#ffffff;
    字体系列:“开放式Sans”、“Roboto”、“Segeo-UI”、Arial、Sans-serif;
    字体大小:16px;
    }
    a{
    颜色:#ffffff;
    文字装饰:下划线;
    }
    .垫片-5{
    高度:5px;
    }
    .垫片-10{
    高度:10px;
    }
    /*部分*/
    .标题{
    颜色:#000000;
    字号:28px;
    字体大小:粗体;
    最大宽度:1160px;
    边缘底部:5px;
    填充:10px 10px 10px 40px;
    }
    .内容{
    颜色:#000000;
    字号:600;
    最大宽度:1160px;
    填充:10px 10px 10px 40px;
    }
    .内容a{
    颜色:#000000;
    }
    新闻稿
    Lorem ipsum dolor sit amet
    他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。
    

    我使用了一个节点的npm包haml.io,它的工作方式很有魅力

    您是否尝试将其设置为
    TD
    上的
    样式
    属性? Outlook可能会从TD本身中删除背景图像,或者不将其识别为有效属性,而
    style=“”
    可能会起作用

    这就是我在自己的时事通讯中所做的修复工作。 因此,在你的情况下:

    发件人:

    致:


    还请记住,如果您的域不是
    ibb.co
    ,邮件客户端在默认情况下倾向于隐藏图像,并“允许”用户下载外部图像。

    尝试在
    表中使用透明背景,而不是
    td
    ,就像您使用上面的彩色bg图像一样,使用
    背景色:rgba如何(255255255.2);
    而不是半透明的白色图像?@ArturCapraro Outlook不支持此功能。