我要做的是在VPS6单元格顶部有一个蓝色的图像，这里有一个按钮图像是图像http://imgur.com/EoDB31K的链接，我不知道如何在jsfiddle上加载图像。
<table class="table">
<tr>
<th>Package</th>
<th>CPU / vCore </th>
<th>Hard Disk (RAID10)</th>
<th>Guaranteed RAM</th>
<th>Premium Bandwidth</th>
<th>Port Speed</th>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold;">
VPS1
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
2.66 GHz<br>
1 vCore
</td>
<td style="vertical-align: middle;">
10GB
</td>
<td style="vertical-align: middle;">
1 GB
</td>
<td style="vertical-align: middle;">
500GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$9.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=74" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd">
VPS2
</td>
<td style="vertical-align: middle;">
2.66 GHz<br>
2 vCore
</td>
<td style="vertical-align: middle;">
20GB
</td>
<td style="vertical-align: middle;">
2GB
</td>
<td style="vertical-align: middle;">
1000GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$19.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=75" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd">
VPS4
</td>
<td style="vertical-align: middle;">
2.66 GHz</br>
2 vCore
</td>
<td style="vertical-align: middle;">
40GB
</td>
<td style="vertical-align: middle;">
4GB
</td >
<td style="vertical-align: middle;">
1000GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$29.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=76" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd; background-image: url('bestSeller.png')">
VPS6
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
2.66 GHz</br>
4 vCore
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
60GB
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
6GB
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
2000GB
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
100Mbps
</td>
<td style=" background-color:#d7f3fd">
<div class="text-center">
<div class="table-price"><span>$49.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=77" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd">
VPS8
</td>
<td style="vertical-align: middle;">
2.66 GHz</br>
4 vCore
</td>
<td style="vertical-align: middle; ">
80GB
</td>
<td style="vertical-align: middle;">
8GB
</td>
<td style="vertical-align: middle;">
4000GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$59.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=78" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd">
VPS16
</td>
<td style="vertical-align: middle;">
2.66 GHz</br>
4 vCore
</td>
<td style="vertical-align: middle;">
100GB
</td>
<td style="vertical-align: middle;">
16GB
</td>
<td style="vertical-align: middle;">
6000GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$69.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=79" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
答案 0 :(得分：0)
你可能没有看到任何东西，因为你的源图像很大;只设置背景图像就会剪掉右上角的一小部分。
<td style="vertical-align: middle; font-weight: bold;
background-color:#d7f3fd;
background-image: url('http://i.imgur.com/EoDB31K.png');
background-size: 40px 40px;
background-repeat: no-repeat;">
答案 1 :(得分：0)
使用:after伪元素：https://jsfiddle.net/uyctbrz6/1/
#vps6:after {
content:"";
top:0;
width:30px;
height:30px;
position:absolute;
display:block;
background-image: url(http://i.imgur.com/EoDB31K.png);
background-size:100% auto;
background-repeat:no-repeat;
}
虽然看起来很糟糕。