Gmail从电子邮件中删除梯度HTML身体

发布于 2025-02-11 23:14:42 字数 1505 浏览 0 评论 0原文

我正在使用Amazon SES发送电子邮件，现在我正在尝试为电子邮件“正文”创建模板。正如标题所说，我正在使用一些渐变来获得更好的视图，但问题是Gmail无法正确显示它们。

我没有粘贴所有代码，这是一个简单的示例，说明我如何使用梯度

<html>
<head>     
    <style>
        a {
            text-decoration: none;
        }

        .gradient {
            background: -webkit-linear-gradient(121.12deg, #E83448 -8.32%, #C3356E 85.14%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        @font-face {
            font-family: "Biennale-BlackIt";
            src: url("Biennale-BlackIt.otf");
        }

        @font-face {
            font-family: "Biennale-Regular";
            src: url("Biennale-Regular.otf");
        }
        
    </style>
</head>
<body>
    <div style="width: 350px; height:700px;
    display: block;
    margin: 0 auto;">
        <div style="padding: 15px 45px 15px 45px;">
            <div style="margin-top: -10px;">
                <h1 class="gradient" style="font-size: 32px;
                    font-family: Biennale-BlackIt;">
                    Hello
                </h1>
            </div>
    </div>
</body>
</html>

这就是它的外观 image1

这就是应该如何看待 image2

我该如何解决？

原文

I'm using Amazon SES for sending emails and now I'm trying to create a template for the email "body". As the title says I'm using some gradients for a better view but the problem is gmail won't show them correctly.

I didn't paste all code, this is a simple example of how I'm using gradients

<html>
<head>     
    <style>
        a {
            text-decoration: none;
        }

        .gradient {
            background: -webkit-linear-gradient(121.12deg, #E83448 -8.32%, #C3356E 85.14%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        @font-face {
            font-family: "Biennale-BlackIt";
            src: url("Biennale-BlackIt.otf");
        }

        @font-face {
            font-family: "Biennale-Regular";
            src: url("Biennale-Regular.otf");
        }
        
    </style>
</head>
<body>
    <div style="width: 350px; height:700px;
    display: block;
    margin: 0 auto;">
        <div style="padding: 15px 45px 15px 45px;">
            <div style="margin-top: -10px;">
                <h1 class="gradient" style="font-size: 32px;
                    font-family: Biennale-BlackIt;">
                    Hello
                </h1>
            </div>
    </div>
</body>
</html>

This is how it looks image1

This is how is should look image2

How can i fix that ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

演出会有结束 2025-02-18 23:14:43

webkit 在所有浏览器中都无法使用以下操作：

       .gradient {
            background: linear-gradient(121.12deg, #E83448 -8.32%, #C3356E 85.14%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

Webkit doesn't work in all browser try this:

       .gradient {
            background: linear-gradient(121.12deg, #E83448 -8.32%, #C3356E 85.14%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

回复收藏 0 原文

~没有更多了~