16

是否可以使用 CSS 在时事通讯电子邮件中的元素上使用渐变？是否支持完整的属性？

4

3 回答 3

10

简而言之，没有。

电子邮件客户端很少支持 HTML5 或 CSS3，因此它会中断任何不支持的客户端。

你总是可以有一个后备，但加载时间不会改变太多，添加 CSS3 只是添加更多代码来跟踪。

我建议使用图像标签并将图像托管在您的服务器上，如果您真的必须使用渐变的话。

对于电子邮件，通常越简单越好。就个人而言，我更喜欢接收纯文本。

于 2012-12-19T15:42:29.430 回答
5

如今，电子邮件客户端对 CSS 渐变的支持得到了改进，这样的事情在大多数情况下都可以使用：

background-image: linear-gradient(to top, rgba(0, 0, 0, 0), transparent);

Windows 上的 Outlook 不支持，但您可以使用 VML（矢量标记语言）使其也可以在那里工作，即：

<!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
  <v:fill type="gradient" color="#0072FF" color2="#00C6FF" angle="90" />
  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">            
  <div><![endif]-->
  Text over gradient
<!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->

我为 Maizzle 框架编写了电子邮件渐变指南，它还展示了如何在 Outlook 中进行正文背景渐变，以及其他一些技巧。

于 2020-06-11T12:06:45.360 回答
2

FWIW，这是我在电子邮件中支持 CSS 的首选资源：https ://www.campaignmonitor.com/css/

它没有背景渐变的具体信息，因为这属于background-image属性。我的预感是电子邮件客户端之间存在不一致的支持（如果有的话），因为它是 CSS 的一个相当功能。我唯一的犹豫是我认为背景渐变被视为background-image，除了 Outlook 之外，它似乎有不错的支持。

于 2015-11-03T17:02:29.473 回答