如何为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>相关文章