时间戳

首页 > 解决方案 > VML 响应式背景图片

html-email - VML 响应式背景图片

问题描述

如何使 VML 中的背景图像具有响应性？

为了启用 Outlook 兼容性，我在电子邮件中添加了 VML 背景。这是它的样子

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:900px;height:600px">
          <v:fill type="tile" size="100%,100%" src="https://s3-ap-southeast-1.amazonaws.com/valiram.vmailbuilder.images/44/background.jpg" color="#333333" ></v:fill>
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
     <![endif]-->
[table content here]
    <!--[if gte mso 9]>
                </v:textbox>
               </v:rect>
      <![endif]-->

v:rect 设置为固定宽度。我怎样才能让它响应屏幕的大小。我试过“100%”和“自动”。不工作。

提前致谢。

标签： html-emailvml

解决方案

这是一个改进，但仍然不是一个完整的解决方案。我提供它是为了帮助其他人找到完整的解决方案（如果可能的话）。

尽管 VML 仅适用于 Outlook，因此您应该在所有其他地方使用媒体查询和流体混合来实现响应式背景图像，但 Outlook 移动版仍然是一个问题。

我对上述代码的第一个建议是你有

<v:fill type="tile"

你可以把它改成

<v:fill type="frame"

这将阻止它重复。这可能是一个真正的问题。如果您希望它重复，请不要更改该代码。但是你选择的图像在我看来并不意味着重复。

我设法使它的高度合适，并切断了右手边，这对我的形象来说实际上效果很好。但它没有响应。但是，对于您的示例，它会切断 V。这可能是可以接受的，或者您可以使用左侧的 V 重新拍摄。所以这不是一个理想的解决方案，我会继续寻找一个。

这是我实现它的方法：

<!-- Full width background image with content.  Image is full width but 200px high -->
<div mc:repeatable="options" mc:variant="Main Background Image with Text overlay">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%;min-height:328px;height:328px;" background="https://gallery.mailchimp.com/fa85a578f928f05fa5750d667/images/cc24d737-fea1-4a47-87fb-517f5fecb2f4.jpg">
        <tr>
            <td style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">
                <!--[if gte mso 9]>
                <v:rect style="width:600px;height:328px;" strokecolor="none" stroke="false">
                    <v:fill type="frame" color="#303131" src="https://gallery.mailchimp.com/fa85a578f928f05fa5750d667/images/cc24d737-fea1-4a47-87fb-517f5fecb2f4.jpg" /></v:fill>
                </v:rect>
                <v:shape id="bgImage" style="position:absolute;width:600px;height:328px;">
                <![endif]-->
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="height: 238px;">&nbsp;</td>
<!-- this is just a spacer to force the heading down -->
                    </tr>
                    <tr>
                        <td class="h1 bold white" mc:edit="background-image-h1">
                            My Heading Text
                        </td>
                    </tr>
                </table>
                <!--[if gte mso 9]>
                </v:shape>
                <![endif]-->
            </td>
        </tr>
    </table>
</div>
<!-- END Full width background image with content.  Image is full width but 200px high -->

我认为您已经使用了 Stigs 解决方案https://backgrounds.cm/但我发现上面的内容更易于管理并在https://blog.edmdesigner.com/background-images-in-modern-html-emails上找到/

我将其保存为 Gist 以便稍后查找https://gist.github.com/uglyeoin/d8dde956e5a72558de07cf2a240a15c0

如果您找到更好的解决方案，请随意提交要点。我会写一篇文章并在某个时候展示我的全部工作。我希望这至少能让你向前迈出一步。

推荐阅读