如何为HTML电子邮件设置低不透明度背景图像-前端问题

How do I set background image with low opacity for HTML EMAIL(如何为HTML电子邮件设置低不透明度背景图像)

本文介绍了如何为HTML电子邮件设置低不透明度背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想明确说明，这是针对HTML电子邮件的。我正在尝试设置不透明度较低的背景图像。我已经屏蔽了一行无用的代码，因为它不会在电子邮件中呈现。但是，我找不到一种在背景图像中编码的方法，该图像可以在电子邮件上呈现，也可以在其上显示文本。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NASCAR Fan Email</title>
    <style type="text/css">
        @media only screen and (max-width:900px) {
            .photoText {
                left: 100px !important;
            }
        }
    </style>
</head>

<body style="margin: 0; padding: 0;">

    <table class="outer" style="margin: 0 auto;  border-spacing: 0; align-items: center;
        font-family: Stainless-Bold; color: black; width: 100%;">
        <tr>
            <td>
                <tr>
                    <td style="padding: 0;">
                        <table style="border-spacing: 0; width: 100%;">
                            <tr>
                                <td class="fanCouncil" style="background-color: white; padding: 80px; text-align: center;  border-bottom: 15px solid; border-image: linear-gradient(to right, #ffd659 25%, #e4002b 25%, #e4002b 30%, #e4002b 60%, #007ac2 40%, #007ac2 75%) 5;">
                                    <img class="fanHeader" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png" alt="Fan Email" width="1200">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td class=" photoText " style="position: absolute; top: 400px; left: 260px; ">
                        <p style="
                line-height: 2.2;
                max-width: 1200px;
                font-size: 40px; padding: 20px;" class=" entryText ">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>

                        <a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" clickStart " style=" font-size: 40px; font-weight: bold;
                text-transform: uppercase;
                text-decoration: none; color: black;">Click here to Start </a>
                        <p style="
                line-height: 2.2;
                max-width: 1200px;
                font-size: 40px;" class=" unableText "> If you are unable to click the link, please copy and past the full URL below into your browser:</p>

                        <a style=" font-size: 40px; color: black;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" copyLink ">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J</a>

                        <p style="line-height: 2.2; max-width: 1200px; font-size: 40px;" class=" thankYou ">Thank you!<br>Official NASCAR Fan Council</p>
                    </td>
                </tr>

                <tr>
                    <td>

                        <!-- <img style="opacity: 0.3; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; " class=" fanPhoto " src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg " alt="NASCAR Daytona Fan Photo"> -->
                    </td>
                </tr>
    </table>
    </tr>
    </td>

</body>

</html>

推荐答案

您可以使用div元素使其适合屏幕，并使其固定，而不是设置正文的背景。然后在里面放一个img并缩放它以适合div。您也可以使用span，它看起来非常相似。唯一的区别是span是内联容器，而不是挡路。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NASCAR Fan Email</title>
  <style type="text/css">
    @media only screen and (min-width:700px) {
      .photoText {
        left: 100px !important;
      }
    }
    
    @media only screen and (max-width:600px) {
      .photoText {
        left: 110px !important;
      }
    }
  </style>
</head>

<body style="margin: 0; padding: 0;">
  <!-- added div -->
  <div id="fixed-background" style="width: 100vw; height: 100vh; margin: 0px; z-index: -1; padding:0px; position: fixed;"><img style="opacity: 0.3; width: 100%; height: 100%; object-fit: cover; display: inline-block;" class=" fanPhoto " src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg " alt="NASCAR Daytona Fan Photo"></div>
    <table class="outer" style="margin: 0 auto;  border-spacing: 0; align-items: center;
        font-family: Stainless-Bold; color: black; width: 100%;">
      <tr>
        <td style="padding: 0;">
          <table style="border-spacing: 0; width: 100%;">
            <tr>
              <td class="fanCouncil" style="background-color: white; padding: 80px; text-align: center;  border-bottom: 15px solid; border-image: linear-gradient(to right, #ffd659 25%, #e4002b 25%, #e4002b 30%, #e4002b 60%, #007ac2 40%, #007ac2 75%) 5;">
                <img class="fanHeader" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png" alt="Fan Email" width="1200">
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td class=" photoText " style="position: absolute; top: 400px; left: 260px; ">
          <p style="
                line-height: 2.2;
                max-width: 1200px;
                font-size: 40px; padding: 20px;" class=" entryText ">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>

          <a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" clickStart " style=" font-size: 40px; font-weight: bold;
                text-transform: uppercase;
                text-decoration: none; color: black;">Click here to Start </a>
          <p style="
                line-height: 2.2;
                max-width: 1200px;
                font-size: 40px;" class=" unableText "> If you are unable to click the link, please copy and past the full URL below into your browser:</p>

          <a style=" font-size: 40px; color: black;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" copyLink ">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J</a>

          <p style="line-height: 2.2; max-width: 1200px; font-size: 40px;" class=" thankYou ">Thank you!<br>Official NASCAR Fan Council</p>
        </td>
      </tr>
    </table>
</body>

</html>

这篇关于如何为HTML电子邮件设置低不透明度背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！