我已经修改了 Marketo 响应式电子邮件模板,并且需要在媒体查询到达断点时更换标题图像。然而,许多版本的 Outlook不支持背景图像(谢谢 Micro$uk),所以有没有办法编写 CSS 来用 src 而不是背景图像换出图像?这是来自 litmus.com 的屏幕截图,您可以看到该图像没有出现在许多版本的 Outlook 中。
<img src="image1"/> to <img src="image2"/>
我已经修改了 Marketo 响应式电子邮件模板,并且需要在媒体查询到达断点时更换标题图像。然而,许多版本的 Outlook不支持背景图像(谢谢 Micro$uk),所以有没有办法编写 CSS 来用 src 而不是背景图像换出图像?这是来自 litmus.com 的屏幕截图,您可以看到该图像没有出现在许多版本的 Outlook 中。
<img src="image1"/> to <img src="image2"/>
javascript 可能不会在很多电子邮件客户端中工作。我将以下代码用于我的 HTML 电子邮件模板。
HTML
<a href="#" border="0">
<span id="mobile">
<img id="mainimg" class="headimg" src="#" alt="...">
</span>
</a>
CSS
@media only screen and (max-width: 450px) {
span[id=mobile] {
display:block;
background-image: url(#) !important;
background-repeat: no-repeat !important;
background-position: top center !important;
width: 100% !important;
height: # !important;
}
img[id=mainimg] {
display: none !important;
}
}
只需用您的链接和/或移动 img 的高度替换“#”,您就可以将该断点设置为您需要的任何值。我得到了非常好的结果,并通过了所有的石蕊测试,除了莲花笔记。
希望这会有所帮助。
在 HTML...
<div style="src:www.google.com"></div>
并在javascript中尝试这个......(我还没有测试过)
Element.getElementsByTagName('img')[0].src='www.google.com';