Html 将背景图像添加到单个表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28422551/
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
Adding a background image to a single table cell
提问by End? Fujimoto
Hello I was wondering if it's possible to add a background image to a single table cell? If you look at the image I have below I would like the green background image I have to be in those cells.
您好，我想知道是否可以将背景图像添加到单个表格单元格中？如果您查看我下面的图像，我希望我必须在这些单元格中使用绿色背景图像。
My code for the table is,
我的表代码是，
<table class="TFtable" style="height: 448px;" width="1007">
<tbody>
<tr>
<td style="background-color: #000000;">
<p><span style="font-size: 200%; color: #749d36;">??? Pricing</span></p>
<p><span style="font-size: 200%;">???? Structure</span></p>
</td>
<td style="text-align: center;">
<p><span style="font-size: medium;">Professional</span></p>
<p><span style="font-size: medium;">Resume</span></p>
<br /><br />
<p><span style="font-size: xx-large; color: #749d36;">9</span></p>
</td>
<td style="text-align: center;">
<p>Managerial</p>
<p>Resume</p>
<p>9</p>
</td>
<td style="text-align: center;">
<p><span style="font-size: medium;">Executive</span></p>
<p><span style="font-size: medium;">Resume</span></p>
<br /><br />
<p><span style="font-size: xx-large; color: #749d36;">9</span></p>
</td>
<td style="text-align: center;">
<p>C-Suite</p>
<p>Resume</p>
<p>9</p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Resume Specs</span></td>
<td style="text-align: center;"><span style="font-size: small;">2-3 pg resume</span></td>
<td style="text-align: center;">4-5 pg resume</td>
<td style="text-align: center;">
<p>+ cover sheet and</p>
<p>graphics</p>
</td>
<td style="text-align: center;">+ standalone bio pg</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Phone Interview</span></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;">
<p><img src="images/greentick.png" alt="" width="24" height="24" /></p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Draft To Approve</span></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;">
<p><img src="images/greentick.png" alt="" width="24" height="24" /></p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Template Options</span></td>
<td style="text-align: center;">?</td>
<td style="text-align: center;">?</td>
<td style="text-align: center; vertical-align: middle;"><br /><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Extras</span></td>
<td style="text-align: center;">?</td>
<td style="text-align: center;">?</td>
<td style="text-align: center;">
<p>+ free LinkedIn</p>
<p>profile</p>
</td>
<td style="text-align: center;">
<p>+ free LinkedIn</p>
<p>profile</p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Delivery</span></td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Cover Letter</span></td>
<td style="text-align: center;"><br />+ <br /><br /></td>
<td style="text-align: center;"><br />+ <br /><br /></td>
<td style="text-align: center;"><br />+ <br /><br /></td>
<td style="text-align: center;"><br />+ <br /><br /></td>
</tr>
<tr>
<td style="background-color: #000000; text-align: center;">
<p>If you're not sure where</p>
<p>your job would fit, please</p>
<p>get in touch to discuss?</p>
<p>your requirements.</p>
</td>
<td style="text-align: center;">
<p>Vocations (such as</p>
<p>Teaching & Nursing)</p>
<p>Early Career Professionals</p>
</td>
<td style="text-align: center;">
<p>Managers and Senior</p>
<p>Professionals (Lawyers,</p>
<p>Medical Doctors), BDMs,</p>
<p>Consultants...</p>
</td>
<td style="text-align: center;">
<p>Senior Managers and Exec</p>
<p>Directors (Operations</p>
<p>Managers, GMs, Heads of</p>
<p>Department</p>
</td>
<td style="text-align: center;">
<p>CEOs, CFOs, COOs, CIOs,</p>
<p>Managing Directors, Board</p>
<p>Members & Non-Execs,</p>
<p>Practice Directors & Principals</p>
</td>
</tr>
</tbody>
</table>
<p>?</p>
采纳答案by Sachin
This can be achieved using CSS:
这可以使用 CSS 来实现：
First you will need to create an ID for the table cell that you wish to have an image as the background.
首先，您需要为您希望将图像作为背景的表格单元格创建一个 ID。
After this, you will need to do this in CSS:
在此之后，您将需要在 CSS 中执行此操作：
#tableCellWithBackground {
background-image: url("<The location of your image in your webspace, or the url of the image.");
}
This should work, tell me if there is a bug or something wrong.
这应该有效，告诉我是否有错误或错误。
回答by Leigh B
You could try:
你可以试试：
<td style="background-image: url(PATH/TO/IMAGE);">
If you absolutely have to do it inline.
如果您绝对必须内联进行。
However using CSS would be way cleaner. Something like:
但是使用 CSS 会更干净。就像是：
HTML:
HTML：
<td class="green_background"></td>
CSS:
CSS：
.green_background {
background-image: url(PATH/TO/IMAGE.JPG);
}
回答by racecarjonathan
All done. Here you go. See the JSfiddle HERE. I added the green background to "Managerial Resume" for you. Since you're doing all the CSS inline you need to add background-image: url('http://globe-views.com/dcim/dreams/green/green-04.jpg')to the <td><style>tag.
全部完成。干得好。请参阅此处的 JSfiddle 。我为您在“管理简历”中添加了绿色背景。由于您正在内联处理所有 CSS，因此您需要添加background-image: url('http://globe-views.com/dcim/dreams/green/green-04.jpg')到<td><style>标签中。
