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.mzph.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…