Outlook HTML时事通讯:文本覆盖透明图像覆盖图像
我正在尝试创建一个在Outlook中工作的时事通讯 它应该是这样的(在浏览器或好的电子邮件客户端中也是如此): 但在2019年展望中看起来: 两个问题: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-
<!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不支持此功能。