代码之家 › 专栏 › 技术社区 › ORHAN TOPDAÄ

移动浏览器上html确认电子邮件的损坏

html-email gmail html

ORHAN TOPDAÄ · 技术社区 · 7 年前

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Email Confirmation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
  /**
   * Google webfonts. Recommended to include the .woff version for cross-client compatibility.
   */
  @media screen {
    @font-face {
      font-family: 'Source Sans Pro';
      font-style: normal;
      font-weight: 400;
      src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
    }
    @font-face {
      font-family: 'Source Sans Pro';
      font-style: normal;
      font-weight: 700;
      src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
    }
  }
  /**
   * Avoid browser level font resizing.
   * 1. Windows Mobile
   * 2. iOS / OSX
   */
  body,
  table,
  td,
  a {
    -ms-text-size-adjust: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  /**
   * Remove extra space added to tables and cells in Outlook.
   */
  table,
  td {
    mso-table-rspace: 0pt;
    mso-table-lspace: 0pt;
  }
  /**
   * Better fluid images in Internet Explorer.
   */
  img {
    -ms-interpolation-mode: bicubic;
  }
  /**
   * Remove blue links for iOS devices.
   */
  a[x-apple-data-detectors] {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
  }
  /**
   * Fix centering issues in Android 4.4.
   */
  div[style*="margin: 16px 0;"] {
    margin: 0 !important;
  }
  body {
    width: 100% !important;
    /*height: 100% !important;*/
    padding: 0 !important;
    margin: 0 !important;
  }
  /**
   * Collapse table borders to avoid space between cells.
   */
  table {
    border-collapse: collapse !important;
  }
  /*a {
    color: #1a82e2;
  }*/


  img {
    height: auto;
    line-height: 100%;
    text-decoration: none;
    border: 0;
    outline: none;
  }
      /*a {
          color: #1a82e2;
      }
          a[x-apple-data-detectors] {
              font-family: inherit !important;
              font-size: inherit !important;
              font-weight: inherit !important;
              line-height: inherit !important;
              color: inherit !important;
              text-decoration: none !important;
          }*/

  .bg { /*<a href="https://ibb.co/n1ky65b"><img src="https://i.ibb.co/DMKFzSt/back.png" alt="back" border="0"></a>*/ /*<a href="https://ibb.co/n1ky65b"><img src="https://i.ibb.co/6tsSrfm/back.png" alt="back" border="0"></a>*/ background-image: url("https://i.ibb.co/6tsSrfm/back.png"); /* The image used */ /* Used if the image is unavailable */ /* You must set a specified height */ /*width:100%;*/ background-position: top; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; }
  </style>

</head>
<body class="">
    <!--bgcolor="#e9ecef"-->
    <!-- start preheader -->
    <div class="preheader" style="display: none; max-width: 0; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; opacity: 0; ">
        A preheader is the short summary text that follows the subject line when an email is viewed in the inbox.
    </div>
    <div class="container align-content-center">
        <div class="bg align-content-center" style="width:750px; height:1000px; margin-left:auto;margin-right:auto;padding:50px; align-self:center;">
            <h2 style="margin-top:400px;">
                hi {fusername}
            </h2>
            <p style="font-size:16px; margin-bottom:80px;">Click the button below to confirm your e-mail adress.If you did not create an account with <a href="7d502708.eu.ngrok.io/Home/Index">FlowNetMasterÂ®</a>,      you can safely delete this e-mail.</p>

            <a href="{femod}" target="_blank" style="padding: 16px 36px; width:100px;height:25px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background-color:blue; font-size: 16px; color: #ffffff; text-decoration: none; border-radius: 6px; margin-left:300px;margin-right:auto; margin-bottom:100px; align-self:center;">Confirm E-mail</a>

            <p style="margin-top:75px; margin-bottom:0;">If that does not work, please copy and paste the following link in your browser:</p>
            <br />
            <p style="margin-top:0; font-size:10px;"><a href="{femod}" target="_blank">{femod}</a></p>

                <p style="margin: 0;">Cheers,<br>Oxford Engineering & Software Team </p>

        </div>

        </div>     

    </body>
</html>

在苹果和android邮件应用程序上可视化确认电子邮件没有问题,但是在safari和chrome浏览器上查看gmail上的邮件时,我看不到背景图像。我希望您能告诉我为什么背景图像没有显示在电子邮件中。我非常感谢你的帮助。

1 回复 | 直到 7 年前

pavelbere Devsaiful 7 年前

一些邮件客户端阻止图像,尝试找到下载它的选项,或者尝试使用标记并将您的内容放置在此