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

Question

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

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

background-size: 100%;

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

像这样重复 编辑图像

Answer 1

那么，如何在 html 电子邮件中添加背景图像。假设您的文档类型是 html 4。

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

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

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

对于所有这些客户端[在 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 <-- 关于 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>

输出 ：

Answer 3

你不能真正无限期地拉伸背景图像，就像任何图像一样，background-size也不能按照你想要的方式工作。

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

或者，如果您只想在每行的开头放置图像，请将背景放在 TR 元素上。

我认为您可能遇到的问题是电子邮件客户端中的 CSS 支持。我不确定哪些客户端（如果有）很好地支持 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