代码之家 › 专栏 › 技术社区 › Veeru

VML响应背景iamges

vml html-email

Veeru · 技术社区 · 6 年前

<!--[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: 矩形设置为固定宽度。我怎样才能使它对屏幕的大小做出响应呢。我试过“100%”和“自动”。不起作用。

提前谢谢。

1 回复 | 直到 6 年前

Eoin 6 年前

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

我对上面代码的第一个建议是

<v:fill type="tile"

你可以改成

<v:fill type="frame"

这将阻止它重复。这可能是个真正的问题。如果你想让它重复,那就不要更改代码。但你选择的形象在我看来是不想重复的。

我是如何做到的:

<!-- 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 -->

https://backgrounds.cm/ 但是我发现上面的这些比较容易管理,而且我发现它是可行的 https://blog.edmdesigner.com/background-images-in-modern-html-emails/

https://gist.github.com/uglyeoin/d8dde956e5a72558de07cf2a240a15c0

如果你能找到更好的解决方案,就可以随心所欲地抓住要点。我会写一篇文章,在某个时候展示我的全部工作。我希望这至少能让你向前迈进一步。