将背景图片添加到单个 table 单元格

Question

您好，我想知道是否可以将背景图像添加到单个 table 单元格？如果您查看我下面的图片，我希望我必须在这些单元格中使用绿色背景图片。

我的 table 代码是，

<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 &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .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 &amp; 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 &amp; Non-Execs,</p>
<p>Practice Directors &amp; Principals</p>
</td>
</tr>
</tbody>
</table>
<p> </p>

Answer 1

这可以使用 CSS 来实现：

首先，您需要为您希望将图像作为背景的 table 单元格创建一个 ID。

在此之后，您将需要在 CSS 中执行此操作：

#tableCellWithBackground {
    background-image: url("<The location of your image in your webspace, or the url of the image.");
}

这应该可以，如果有错误或错误请告诉我。

Answer 2

你可以试试：

<td style="background-image: url(PATH/TO/IMAGE);">

如果你绝对必须内联。

但是使用 CSS 会更干净。类似于：

HTML:

<td class="green_background"></td>

CSS:

.green_background {
   background-image: url(PATH/TO/IMAGE.JPG);
}

Answer 3

全部完成。干得好。请参阅 JSfiddle HERE。我为您在 "Managerial Resume" 中添加了绿色背景。由于您正在执行所有 CSS 内联，因此您需要将 background-image: url('http://globe-views.com/dcim/dreams/green/green-04.jpg') 添加到 <td> <style> 标记。

将背景图片添加到单个 table 单元格

Adding a background image to a single table cell

html

css

joomla