电子邮件模板的 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

你必须添加更多的 CSS：

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

Answer 2

那么，如何在 html 电子邮件中添加背景图像。假设您的文档类型是 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

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

试试下面的方法，它会在某种程度上帮助你......

小提琴示例：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>

输出：