HTML郵件背景圖兼容 Outlook

在 HTML 郵件中設置背景圖片時,Outlook(尤其是桌面版的 Outlook for Windows)經常不會正確顯示背景圖,這是因為outlook 是使用 Word 作為郵件渲染引擎,而不是標準的 HTML/CSS 渲染方式。

推薦的解決方案:使用 VML(Vector Markup Language) 兼容 Outlook
這是針對 Outlook 的專門寫法,配合標準寫法實現兼容多個客戶端:

<tr><td valign="top" width="660" height="664" align="top"background="你的背景圖片鏈接"style="background-image: url('你的背景圖片鏈接'); background-repeat: no-repeat; background-size: 660px 664px; background-position: center; vertical-align: bottom; padding: 0; margin: 0px; text-align: center; background-color: #002329;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;display:block;height:664px;"><v:fill type="frame" src="你的背景圖片鏈接"  /><v:textbox inset="0,0,0,0"><![endif]--><table cellpadding="0" cellspacing="0" align="center"></table><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td>
</tr>
<!--[if gte mso 9]> 和 <![endif]--> 是針對 Outlook 2007 及以上版本的條件注釋,只有 Outlook 會讀取。
<v:rect> 是 VML(Vector Markup Language)標簽,VML 是微軟開發的一種矢量標記語言,主要用于早期的 IE 瀏覽器和 Outlook 中。
xmlns:v="urn:schemas-microsoft-com:vml":定義 VML 的命名空間。
fill="true":表示矩形需要填充。
stroke="false":表示矩形不需要邊框。
<v:fill> 用于填充矩形的內容。
type="frame":指定填充類型為框架。
src="https://www.xxxxxxx":指定填充的圖片來源,即使用該鏈接的圖片作為矩形的背景。
<v:textbox> 用于在 VML 圖形中添加文本框。
inset="0,0,0,0":設置文本框的內邊距為 0。
在 Outlook 中,由于其使用的渲染引擎的特殊性,普通的 CSS 背景圖片設置可能無法正常顯示,
因此使用 VML 來實現背景圖片的兼容顯示。

在使用 VML為 Outlook 兼容背景圖時,對圖片格式有一定要求

VML 目前能夠很好地支持 JPEG 、PNG格式的圖片,但如果要使用PNG格式圖片需要以下設置:
<head><!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<xml> 標簽用于包裹 XML 代碼。
<o:OfficeDocumentSettings> 是一個 XML 命名空間的標簽,用于設置 Office 文檔的相關設置。
<o:AllowPNG/>:允許在文檔中使用 PNG 格式的圖片。在早期的 Outlook 版本中,默認可能不支持 PNG 圖片,通過這個設置可以確保 PNG 圖片能夠正常顯示。
<o:PixelsPerInch>96</o:PixelsPerInch>:設置文檔的每英寸像素數為 96,這是標準的屏幕分辨率,確保圖片和文本在屏幕上的顯示效果符合預期。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/78168.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/78168.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/78168.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

杰理ac792開發板按鍵不起效果

按鍵想要起效果需要把UI給注釋掉&#xff0c;排查了半天

Kubernetes 常用運維命令整理

目錄 Kubernetes 常用運維命令整理一、集群管理二、Pod 和容器管理三、Deployment 和應用管理四、Service 和網絡管理五、存儲管理六、ConfigMap 和 Secret 管理七、資源使用與監控八、調度和容錯九、Role 和權限管理十、清理資源 總結 Kubernetes 常用運維命令整理 Kubernete…

在 Debian 12 中恢復被刪除的 smb.conf 配置文件

https://forum.ubuntu.com.cn/viewtopic.php?t494763 本文結合ai輸出&#xff0c;內容中有些錯誤&#xff0c;但確實解決了我的問題&#xff0c;我采取保留完整輸出的方式摘錄。 在 Debian 12 中恢復被刪除的 smb.conf 配置文件&#xff0c;需結合 dpkg 和 ucf&#xff08;Upd…

GB2312/GBK是字符集嗎

GB2312/GBK 是字符集嗎&#xff1f; 是的&#xff0c;GB2312 和 GBBK 既是字符集&#xff08;Character Set&#xff09;&#xff0c;也是編碼方式&#xff08;Encoding&#xff09;。它們不僅定義了可表示的字符范圍&#xff0c;還規定了這些字符在計算機中的二進制存儲格式。…

BOM與DOM(解疑document window關系)

BOM&#xff08;瀏覽器對象模型&#xff09; 定義與作用 BOM&#xff08;Browser Object Model&#xff09;提供與瀏覽器窗口交互的接口&#xff0c;用于控制導航、窗口尺寸、歷史記錄等瀏覽器行為 window&#xff1a;瀏覽器窗口的頂層對象&#xff0c;包含全局屬性和方法&am…

水域陸地兩相宜,便攜漏電探測儀

在自然災害如洪水、地震、臺風及火災中&#xff0c;建筑物和電力設施易因結構破壞、線路老化或設備浸水導致絕緣失效&#xff0c;引發漏電事故。漏電不僅直接威脅人員生命安全&#xff0c;還可能引發二次火災或爆炸&#xff0c;尤其在潮濕環境下導電性增強&#xff0c;觸電風險…

c加加學習之day06->STL標準庫->day01

1.介紹&#xff1a;C 標準模板庫&#xff08;Standard Template Library&#xff0c;簡稱 STL&#xff09;是一組泛型編程的模板類和函數&#xff0c;旨在提供常用的數據結構、算法和函數對象。STL 是 C 標準庫的一部分&#xff0c;極大地提高了編程效率和代碼的可重用性。STL …

onnx注冊cpu版flashattention

摘要 本教程展示了如何在 ONNX Runtime 中注冊一個 CPU 可執行的 FlashAttention 算子。首先,可以直接升級到 ONNX Runtime v1.16 及以上,以獲得內置的 FlashAttention CPU 實現citeturn0search2;其次,演示了如何通過 ONNX Runtime 的 Custom Op 接口自定義實現并注…

3D高斯個人筆記

入門blog,參考視頻1和參考視頻2 球諧函數 通俗介紹或通俗介紹&#xff0c;3D高斯就是利用球諧函數&#xff08;SH函數&#xff09;作為基函數&#xff0c;去求取三維空間中不同點的顏色。 SH函數作為基函數通常是表示不同角度下的距離&#xff0c;即三維球面點半徑&#xff…

電子處方模塊開發避坑指南:從互聯網醫院系統源碼實踐出發

今天&#xff0c;筆者將結合互聯網醫院系統源碼實踐&#xff0c;從技術架構、合規策略、業務流程到性能優化&#xff0c;為大家梳理一份電子處方模塊開發避坑指南&#xff0c;助力各類醫療平臺高效落地電子處方功能。 一、為何電子處方模塊是互聯網醫院的“重災區”&#xff1…

【RabbitMQ | 第2篇】RabbitMQ 控制臺實現消息路由 + 數據隔離

文章目錄 同步調用和異步調用MQRabbitMQ1. RabbitMQ控制臺實現交換機路由到隊列1.1 創建隊列1.2 將消息發送給交換機&#xff0c;是否會到達隊列 2. RabbitMQ控制臺實現數據隔離2.1 添加一個用戶2.2 創建新的虛擬主機 同步調用和異步調用 同步調用是指完成一個功能&#xff0c…

kubernetes》》k8s》》Heml

Heml 下載地址 安裝 curl https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 | bash# helm 添加 倉庫 # helm repo add 倉庫名稱 倉庫地址 helm repo add stable http://mirror.azure.cn/kubernetes/charts/# 查看helm 倉庫列表 helm repo list # 結…

【專題刷題】二分查找(一):深度解刨二分思想和二分模板

&#x1f4dd;前言說明&#xff1a; 本專欄主要記錄本人的基礎算法學習以及LeetCode刷題記錄&#xff0c;按專題劃分每題主要記錄&#xff1a;&#xff08;1&#xff09;本人解法 本人屎山代碼&#xff1b;&#xff08;2&#xff09;優質解法 優質代碼&#xff1b;&#xff…

鄉村治理數字化平臺:信息技術賦能鄉村振興的深度探索

在信息化技術飛速發展的背景下&#xff0c;數字化轉型已成為推動社會進步和治理現代化的關鍵力量。鄉村治理數字化平臺&#xff0c;作為信息技術在鄉村治理領域的深度應用&#xff0c;正逐步成為提升鄉村治理效能、推動鄉村振興的重要工具。本文將深入探討鄉村治理數字化平臺的…

PyQt6基礎_QTabWidget

目錄 代碼 運行 官方文檔 PySide6.QtWidgets.QTabWidget - Qt for Python 代碼 class TempWidget(QWidget):def __init__(self):super().__init__()self.tabs QTabWidget()self.tabs.tabBarClicked.connect(self.tabs_tabBarClicked)widget_tab1 QWidget()widget_tab2…

springboot在eclipse里面運行 run as 是Java Application還是 Maven

在 Eclipse 里運行 Spring Boot 項目時&#xff0c;既可以選擇以“Java Application”方式運行&#xff0c;也可以通過 Maven 命令來運行&#xff0c;下面為你詳細介紹這兩種方式及適用場景。 以“Java Application”方式運行 操作步驟 在項目中找到帶有 SpringBootApplicat…

怎樣記憶Precision、Recall?

首先&#xff0c;明確符號&#xff1a; TP(True Posive)&#xff1a;標簽為正&#xff0c;預測為正 TN(True Negative)&#xff1a;標簽為負&#xff0c;預測為負 FP(False Positive)&#xff1a;標簽為負&#xff0c;預測為正 FN(False Negative)&#xff1a;標簽為正&#xf…

【C語言】C語言動態內存管理

前言 在C語言編程中&#xff0c;內存管理一直是程序員需要重點關注的領域。動態內存管理更是如此&#xff0c;它不僅涉及到內存的靈活分配和釋放&#xff0c;還隱藏著許多潛在的陷阱。本文將從動態內存分配的基礎講起&#xff0c;逐步深入到常見的錯誤、經典筆試題分析&#x…

expres路由模塊化

Express 路由模塊化是實際開發中非常重要的一部分&#xff0c;可以讓你的項目結構更清晰、維護更方便。 &#x1f9f1; 一、為什么要模塊化&#xff1f; 隨著項目變大&#xff0c;如果所有路由都寫在 app.js 中&#xff0c;會很亂。使用模塊化后可以&#xff1a; 功能解耦&a…

C語言——填充矩陣

C語言——填充矩陣 一、問題描述二、格式要求1.輸入形式2.輸出形式3.樣例 三、實驗代碼 一、問題描述 編程實現自動填充nn矩陣元素數值&#xff0c;填充規則為&#xff1a;從第一行最后一列矩陣元素開始按逆時針方向螺旋式填充數值1&#xff0c;2&#xff0c;…&#xff0c;nn…