郵箱www.與iOS和背景剪輯：文本；CSS屬性-有解無憂

我正在設計 HTML 電子郵件，目標是在電子郵件客戶端和明暗模式之間完全兼容。

我在這個設計系統上取得了很大進展，但我遇到了 Gmail 處理代碼的方式不同的問題，具體取決于訪問它的方式。

這是在黑暗模式下通過 Gmail iOS 呈現的內容，正如它應該看起來的那樣。示例-1

這是通過桌面網路瀏覽器通過 Gmail 呈現的內容： example-2

問題：似乎 background-clip: text; 僅支持不支持 Web 應用的 iOS 應用。顏色生成為背景顏色，然后文本應剪切背景以將顏色呈現為文本的顏色。這對于保持深色模式下的可讀性是必要的，否則字體與作為我們品牌顏色的背景混合得太多。

此方法僅對 Gmail 是必需的，因為其他電子郵件客戶端似乎對此沒有任何問題。

文本的 CSS 專門針對 Gmail，看起來像這樣：

u   .body .gmail-text {
     background-color: #E8DDD9;
     background-image: linear-gradient(90deg, #E8DDD9, #E8DDD9);
     background-size: 100%;
     background-repeat: repeat;
     color: transparent!important;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     -moz-background-clip: text;
     -moz-text-fill-color: transparent;
}

所以我的問題；有沒有人想出一個在 gmail 的暗模式下真正定義文本顏色的解決方案？有沒有辦法開發這個，以便作業解決方案只能應用于 Gmail iOS，如果客戶端是訪問 Gmail 的瀏覽器，可以應用一組單獨的屬性？

非常感謝你的幫助！

uj5u.com熱心網友回復：

根據“如何定位電子郵件客戶端”，以下 CSS 專門針對 Gmail iOS（10 ）：

@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) { .foo }

由于它已經只針對 Gmail iOS，您可以將代碼重寫為：

@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
    .gmail-text {
         background-color: #E8DDD9;
         background-image: linear-gradient(90deg, #E8DDD9, #E8DDD9);
         background-size: 100%;
         background-repeat: repeat;
         color: transparent!important;
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         -moz-background-clip: text;
         -moz-text-fill-color: transparent;
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/461052.html

標籤：html css 电子邮件邮箱 html-电子邮件

上一篇：如何使用模板發送Sendgrid電子郵件并為模板添加自定義資料？

下一篇：如何識別電子郵件的收件人？