Question

我在html电子邮件模板中使用背景图片，问题是这个

<table style="background:url('http://i1298.photobucket.com/albums/ag41/Sikander_Nawaz/images_zpsa0d64d23.jpg')  repeat;

background-size: 100%;

但这是重复背景，而不是一个完整背景。如果我使用no-repeat 只是在顶行的表格中没有看到它在其他行中可见其不可见..请建议我如何添加它以使其显示为单个背景。

编辑图片会像这样重复 enter image description here

Answer 1

那么，如何在html电子邮件中添加背景图片。假设你的doctype是html 4。

<table background="your-image.gif">

如果您定义了html电子邮件的可访问性/可见性范围，它将帮助其他人建议您提供更好的解决方案。

如果您的电子邮件仅在网络浏览器上，则可以使用.css。

对于所有这些客户端 [listed on wikipedia]，“HTML支持”的概念并不意味着他们可以处理Web浏览器可以处理的所有HTML。几乎所有电子邮件阅读器都限制HTML功能，出于安全原因，或者由于界面的性质。 CSS和JavaScript可能特别成问题。许多文章描述了每个电子邮件客户端的这些限制。

http://www.sitepoint.com/code-html-email-newsletters/
http://www.campaignmonitor.com/css/
http://en.wikipedia.org/wiki/Comparison_of_email_clients#General_features
http://alistapart.com/article/cssemail＆lt; - 关于html电子邮件的好建议和建议

Answer 2

尝试如下，它会在某种程度上帮助你......

小提琴示例：http://jsfiddle.net/RYh7U/127/

CSS：

.tableBG { position: relative; }
.imgBG {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

HTML表：

<table class="tableBG" width="300px" height="200px" border="1">
    <tr><td><img class="imgBG" src="https://www.google.co.in/images/srpr/logo4w.png"/>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
        <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>
    <tr><td>fhdhd</td><td>dhd</td><td>ddhd</td></tr>    
</table>

输出

enter image description here

Answer 3

您无法无限期地拉伸背景图像，就像使用任何图像一样，background-size doesn't work the way you want it to。

设置background-size: 100%不是您想要的。如果您希望它完全适合父元素，请尝试background-size: cover。如果您的图像很小而且桌子很大，请注意像素化。

或者，如果您只是希望图像位于每行的开头，请将背景放在TR元素上。

我认为您可能遇到的问题是CSS support in e-mail clients。我不确定哪个客户端（如果有的话）能很好地支持CSS 3。我相信你对网络邮件客户端没问题，但我愿意打赌你的电子邮件在Outlook中看起来很糟糕。

Answer 4

您必须添加更多CSS：

-webkit-background-size: cover; // Safari Chrome
-moz-background-size: cover; // Firefox
-o-background-size: cover; // Opera
background-size: cover; //newer Browser

背景图像在电子邮件模板的Html表中

4 个答案: