javascript - 线性渐变在 Outlook 中不起作用

标签 javascript html css email gradient

我知道这是一个非常基本的问题,但我尝试了许多 StackOverflow 解决方案,但对我没有任何帮助。

这是我正在使用的 HTML 内容。

<html>
<style>
  div:after {
    content: "\A";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(216, 38, 38, 0.7)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
    /* W3C */
  }
</style>
<div style="background:rgba(0,0,0,0.5);background:-moz-linear-gradient(top,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%);background: rgba(0,0,0,0.5);background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ *//* background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); */ /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(216, 30, 30, 0.7) 100%);  /* W3C */">
  <p>This is heading</p>
</div>

</html>


它适用于 Gmail,但不适用于 Outlook。

Gmail 的屏幕截图

enter image description here

展望截图

enter image description here

请纠正我做错了什么。

最佳答案

不幸的是,Outlook 不支持线性渐变。
Outlook,尤其是 Windows,主要支持基本的 CSS。

请参阅事件监视器:
https://www.campaignmonitor.com/css/color-background/css-gradients/

关于javascript - 线性渐变在 Outlook 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60225935/

相关文章:

html - 表格格式

javascript - 如何用自己网站的数据填写另一个网站的表格

javascript - Sublime text 3 format/covert 一行成多行

javascript - 序列化类型为 'System.Data.Entity.DynamicProxies' 的对象时检测到循环引用

javascript - 如何通过显示 :none be made visible again with JavaScript? 使元素不可见

javascript - 在 Google Apps 脚本中获取今天日期

HTML/CSS : Section + Aside Issue

javascript - 如何从 Javascript 将 Json 保存到 django 数据库中

css - 如果 textarea 的父项都没有固定大小,为什么它不接受相对字体大小? (火狐 18.0 Mac)

javascript - 根据所选选项显示 HTML