Question

我正在开发一个向用户发送通知电子邮件的应用程序。该应用程序包含用户创建电子邮件，在其浏览器中显示电子邮件，然后将其发送出去的功能。我们将其设计为使用嵌入在CSS中的Base64编码图像，如下所示：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Notification Email</title>
    <style>

        html {
            box-sizing: border-box;
            overflow: -moz-scrollbars-vertical;
            overflow-y: scroll;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        .bg {
            flex: 1 1 0px;
            letter-spacing: 2px;
            color: white;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            padding: 1vh 0;
        }

        .bg:nth-child(1) {
            background-color: #DC1431;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IC0xNjEuOSA1MjEuMSAyMzguNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyA3OTkuOSAtMTYxLjkgNTIxLjEgMjM4Ljc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNFMzE4Mzc7fQ0KCS5zdDF7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9DQoJLnN0MntmaWxsOiMwMDczQ0Y7fQ0KCS5zdDN7ZmlsbDp1cmwoI1NWR0lEXzJfKTt9DQoJLnN0NHtmaWxsOiMwMTIxNjk7fQ0KCS5zdDV7ZmlsbDp1cmwoI1NWR0lEXzNfKTt9DQoJLnN0NntmaWxsOiMwMDUyQzI7fQ0KCS5zdDd7ZmlsbDp1cmwoI1NWR0lEXzRfKTt9DQo8L3N0eWxlPg0KPHJlY3QgeD0iNzk5LjkiIHk9Ii0xNjEuNSIgY2xhc3M9InN0MCIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iMTUwOC4zMDQ5IiB4Mj0iMz22LjQ4MjciIHkyPSIxMjU0LjkzNDQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgODYzLjA3IDE0MzYuMjAwMSkiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNDNDEyMzAiLz4NCgk8c3RvcCAgb2Zmc2V0PSI5LjAwMDAwMGUtMDAyIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0IxMzMxO3N0b3Atb3BhY2l0eTowLjc5Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4xOCIgc3R5bGU9InN0b3AtY29sb3I6I0QxMTUzMztzdG9wLW9wYWNpdHk6MC41OCIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMjkiIHN0eWxlPSJzdG9wLWNvbG9yOiNENzE2MzQ7c3RvcC1vcGFjaXR5OjAuNCIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNCIgc3R5bGU9InN0b3AtY29sb3I6I0RCMTYzNTtzdG9wLW9wYWNpdHk6MC4yNSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNTIiIHN0eWxlPSJzdG9wLWNvbG9yOiNERjE3MzY7c3RvcC1vcGFjaXR5OjAuMTQiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjY1IiBzdHlsZT0ic3RvcC1jb2xvcjojRTExODM3O3N0b3Atb3BhY2l0eTo2LjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMC43OSIgc3R5bGU9InN0b3AtY29sb3I6I0UzMTgzNztzdG9wLW9wYWNpdHk6MS4wMDAwMDBlLTAwMiIvPg0KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMzE4Mzc7c3RvcC1vcGFjaXR5OjAiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTMyMSw3Ny4ydi0yMzguN2gtMzguOWMtMTU0LDQ4LjItMzE3LjEsMTQzLjYtNDQwLjIsMjM4LjdIMTMyMXoiLz4NCjwvc3ZnPg0K);
        }

        .bg:nth-child(2) {
            background-color: #0073CF;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDEzMC41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDEzMC41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSIxMzAuOCIgY2xhc3M9InN0MiIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iMTIxNS45NSIgeDI9IjM2My40ODI3IiB5Mj0iOTYyLjU3OTQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgODYzLjA3IDE0MzYuMjAwMSkiPg0KCTxzdG9wICBvZmZzZXQ9IjguMDAwMDAwZS0wMDIiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDUyQzIiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjE2IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA1OUM1O3N0b3Atb3BhY2l0eTowLjgiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA2MEM3O3N0b3Atb3BhY2l0eTowLjU5Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4zNSIgc3R5bGU9InN0b3AtY29sb3I6IzAwNjZDQTtzdG9wLW9wYWNpdHk6MC40MSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNDUiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDZBQ0M7c3RvcC1vcGFjaXR5OjAuMjYiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjU2IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA2RUNEO3N0b3Atb3BhY2l0eTowLjE0Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC42OCIgc3R5bGU9InN0b3AtY29sb3I6IzAwNzFDRTtzdG9wLW9wYWNpdHk6Ni4wMDAwMDBlLTAwMiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuODEiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDczQ0Y7c3RvcC1vcGFjaXR5OjEuMDAwMDAwZS0wMDIiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDA3M0NGO3N0b3Atb3BhY2l0eTowIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBhdGggY2xhc3M9InN0MSIgZD0iTTg0MS45LDM2OS41SDEzMjFWMTMwLjho33M4LjlDMTEyOC4xLDE3OSw5NjQuOSwyNzQuNSw4NDEuOSwzNjkuNXoiLz4NCjwvc3ZnPg0K);
        }

        .bg:nth-child(3) {
            background-color: #0052C2;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDQxNi41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDQxNi41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSI0MTYuOCIgY2xhc3M9InN0NiIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iOTI5Ljk1IiB4Mj0iMzYzLjQ4MjciIHddPSI2NzYuNTc5NCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSA4NjMuMDcgMTQzNi4yMDAxKSI+DQoJPHN0b3AgIG9mZnNldD0iMi4wMDAwMDBlLTAwMiIgc3R5bGU9InN0b3AtY29sb3I6IzAxMjE2OSIvPg0KCTxzdG9wICBvZmZzZXQ9IjMuMDAwMDAwZS0wMDIiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMTIzNkM7c3RvcC1vcGFjaXR5OjAuOTciLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjEzIiBzdHlsZT0ic3RvcC1jb2xvcjojMDEzMTg2O3N0b3Atb3BhY2l0eTowLjY3Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4yNSIgc3R5bGU9InN0b3AtY29sb3I6IzAwM0Q5QztzdG9wLW9wYWNpdHk6MC40MiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMzciIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDQ2QUQ7c3RvcC1vcGFjaXR5OjAuMjMiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjUyIiBzdHlsZT0ic3RvcC1jb2xvcjojMDA0REI5O3N0b3Atb3BhY2l0eTowLjEiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjY5IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA1MUMwO3N0b3Atb3BhY2l0eToyLjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzAwNTJDMjtzdG9wLW9wYWNpdHk6MCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04NDEuOSw2NTUuNUgxMzIxVjQxNi44aC0zOC45QzExMjguMSw0NjUsOTY0LjksNTYwLjUsODQxLjksNjU1LjV6Ii8+DQo8L3N2Zz4NCg==);
        }

        .bg:nth-child(4) {
            background-color: #012169;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDY5Mi41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDY5Mi41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSI2OTIuOCIgY2xhc3M9InN0NCIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC4zIi8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45MTMzIiB5MT0iNjU0LjE2NDUiIHgyPSIzNjMuMzk3NiIgeTI9IjQwMC44ODE2IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDg2My4wNyAxNDM2LjIwMDEpIj4NCgk8c3RvcCAgb2Zmc2V0PSI5LjAwMDAwMGUtMDAyIiBzdHlsZT0ic3RvcC1jb2xvcjojMDAwQTIzIi8+DQoJPHN0b3AgIG9mZnNldD0iMC4xOCIgc3R5bGU9InN0b3AtY29sb3I6IzAwMTEzNztzdG9wLW9wYWNpdHk6MC43MSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMzciIHN0eWxlPSJzdG9wLWNvbG9yOiMwMTFBNTM7c3RvcC1vcGFjaXR5OjAuMzEiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjYxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDExRjY0O3N0b3Atb3BhY2l0eTo3LjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzAxMjE2OTtzdG9wLW9wYWNpdHk6MCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04NDEuOSw5MzEuMkgxMzIxVjY5Mi44aC0zOC45QzExMjguMSw3NDEsOTY0LjksODM2LjMsODQxffOTMxLjJ6Ii8+DQo8L3N2Zz4NCg==);
        }


        body {
            margin: 0;
            background: #fafafa;
            font-family: 'Connections';
            font-size: 12px
        }

    </style>
</head>

<body>
    <div class="content">
        <div class="head">
            <span class="bg">Initech</span>
            <span class="bg">Initrode</span>
            <span class="bg">Inacan</span>
            <span class="bg">Inabag</span>
        </div>

从应用程序查看时，预览电子邮件可以正常工作，但是当实际发送出去时，图像将不会显示，并且标题链接的格式也会放错位置。有一个图像直接嵌入，并且显示得很好，所以我倾向于认为这与CSS有关

尝试在Outlook 2013中查看此消息，希望有人可以告诉我是否可行。

Answer 1

Outlook不支持CSS的background-image属性。您可以在以下系列文章中阅读有关此内容的更多信息：

您可以为任何外部图像添加Web引用，也可以仅添加嵌入式图像，例如：

    Set objOL = CreateObject("Outlook.Application")
    Set objMail = objOL.CreateItem(olMailItem)
    objMail.Attachments.Add "C:\pictest.jpg"
    objMail.HTMLBody = "<html><p>This is a picture.</p>" & _
                   "<img src='cid:pictest.jpg' height=480 width=360>"
    objMail.Display

有关更多信息，请参见To add an embedded image to an HTML message。

Answer 2

Word（在Outlook中呈现HTML消息）不支持HTML主体中嵌入的base64图像。它仅支持外部图像和附件中存储的图像。

如何在Outlook电子邮件中显示嵌入式Base64编码的图像

2 个答案: