在HTML电子邮件中无法设置背景混合模式和背景颜色

时间:2018-10-02 13:18:51

标签: css html-email

我正在尝试创建电子邮件并在透明度较低的<td>上设置背景图片。
我来的是:

<td dir="rtl" align="center" style="width:100% border: 0px; background-blend-mode: lighten; background-color: rgba(255, 255, 255, 0.8); background-image:url('image_url');background-repeat:no-repeat;background-position: 50% 50%;background-size:auto; vertical-align: middle;" colspan="2">

当我在创建的HTML页面上使用它时,此方法效果很好,但是,当我将其作为电子邮件发送到Android上的Gmail桌面Web客户端/收件箱应用程序/ Android上的Gmail应用程序时,背景消失了。

根据我的检查,我设置的所有属性都与我提到的客户端兼容。

在电子邮件中还有另一种方法吗?

2 个答案:

答案 0 :(得分:1)

在设计电子邮件模板时,您必须像在90年代中期建立网站那样工作。很多东西不起作用。实际上,还有更多不起作用的东西,然后又起作用了。

方便的工具是caniuse.email

答案 1 :(得分:1)

background-blend-mode可用于IOS设备,传统的Gmail,但不适用于许多移动客户端或Outlook。

https://www.campaignmonitor.com/css/color-background/background-blend-mode/

请查看本文,看看是否还有另一种技术可能会有所帮助,但没有通用的通用方法。  https://www.emailonacid.com/blog/article/uncategorized/css-animations-part-1/

rgba-color不适用于Yahoo或Outlook。

https://www.campaignmonitor.com/css/color-background/rgba-colors/

positioning不适用于大多数电子邮件客户端。

background-image根本无法与Outlook或某些Android客户端一起使用。但是,您可以使用VML来解决使用Outlook的问题。

https://www.campaignmonitor.com/css/color-background/background-image/

由于您并没有真正发布您要尝试做的代码示例,只是一小段代码,因此很难就获得相同效果的更好方法提出建议。

祝你好运。