电子邮件模板的 Html 表中的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15949168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image in Html Table for Email Template
提问by Sikander
i am using background image in html email template, problem is this
我在 html 电子邮件模板中使用背景图片，问题是这个
<table style="background:url('http://i1298.photobucket.com/albums/ag41/Sikander_Nawaz/images_zpsa0d64d23.jpg') repeat;
background-size: 100%;
but that goes as repeat background , instead of one complete one . and if i use no-repeatthat does not go all around the table just in top row its visible in other rows its not visible.. please suggest me how to add it so that it appears as single background .
但那是重复的背景，而不是一个完整的背景。如果我使用no-repeat它并没有在桌子周围四处走动，只是在顶行它在其他行中可见，它在其他行中不可见..请建议我如何添加它，使其显示为单一背景。
Editimage repeats like this
像这样编辑图像重复
回答by Milche Patern
Well, how to add background image in html email. Asuming your doctype is html 4.
那么，如何在 html 电子邮件中添加背景图像。假设您的文档类型是 html 4。
<table background="your-image.gif">
If you define the scope of accessibility/visibilityof your html email, it will help others suggest you a better solution.
如果您定义html 电子邮件的可访问性/可见性范围，它将帮助其他人向您建议更好的解决方案。
If your email is going to be only on web browser, then you can use .css.
如果您的电子邮件将仅在 Web 浏览器上显示，那么您可以使用 .css。
For all of these clients[listed on wikipedia], the concept of "HTML support" does not mean that they can process the full range of HTML that a web browser can handle. Almost all email readers limit HTML features, either for security reasons, or because of the nature of the interface. CSS and JavaScript can be especially problematic. A number of articles describe these limitations per-email-client.
对于所有这些客户端[在维基百科上列出]，“HTML 支持”的概念并不意味着它们可以处理 Web 浏览器可以处理的所有 HTML。几乎所有电子邮件阅读器都出于安全原因或界面的性质限制了 HTML 功能。CSS 和 JavaScript 可能尤其成问题。许多文章描述了每个电子邮件客户端的这些限制。
回答by Pandian
Try like below, It will help you on some way...
像下面这样尝试，它会以某种方式帮助你......
Fiddle Example : http://jsfiddle.net/RYh7U/127/
小提琴示例：http: //jsfiddle.net/RYh7U/127/
CSS :
CSS :
.tableBG { position: relative; }
.imgBG {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
HTML Table :
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>
Output :
输出 ：
回答by Jeff
You can't really stretch a background image indefinitely, just as with any image, and background-sizedoesn't work the way you want it to.
您不能真正无限期地拉伸背景图像，就像任何图像一样，并且background-size不能按您希望的方式工作。
Setting background-size: 100%isn't what you're looking for. Try background-size: coverif you want it to fit entirely within the parent element. Beware of pixelation if your image is small and your table is big.
设置background-size: 100%不是你要找的。background-size: cover如果您希望它完全适合父元素，请尝试。如果您的图像很小而您的桌子很大，请注意像素化。
Alternatively, if you simply want the image at the start of every row, put the background on your TR elements.
或者，如果您只想在每一行的开头显示图像，请将背景放在 TR 元素上。
I think the problem you are likely to encounter is CSS support in e-mail clients. I'm not sure which clients (if any) support CSS 3 well. I'm sure you'd be ok for webmail clients, but I'm willing to bet your e-mails will look terrible in Outlook.
我认为您可能遇到的问题是电子邮件客户端中的 CSS 支持。我不确定哪些客户端（如果有）很好地支持 CSS 3。我相信您对 webmail 客户端没问题，但我敢打赌，您的电子邮件在 Outlook 中看起来会很糟糕。
回答by FelixH
You have to add some more CSS:
您必须添加更多 CSS：
-webkit-background-size: cover; // Safari Chrome
-moz-background-size: cover; // Firefox
-o-background-size: cover; // Opera
background-size: cover; //newer Browser
