Css bg图像在表头的定位

如何使用css实现以下功能（背景颜色与标题行重叠的背景图像）：

这是表中第个单元格的一部分。 第四行是彩色的#0098da，第四个单元格的末尾是图像（图像的url在这里）

我曾尝试在TH中定位带有bg图像的div，但我遇到了图像应与TH边界重叠的问题。因此，我得到了以下结论：

HTML:

JSFIDLE示例：

我认为，应该有另一种方法来做到这一点

请给我一些线索如何做到这一点？我还有其他具有不同图像的TH细胞以相同的方式定位。

试试这个 将图像类标记放在另一个div中，并根据需要应用样式

 float:right;margin-right:90px

图像位置为绝对值

 position: absolute;

你的代码刚刚修改过

HTML

<table id="duration-of-refund" border="0">
    <tbody>
        <tr>
            <th>
                <p>Purchases in Webshops</p>
                <div style="float:right;margin-right:90px;">
                <div class="img-at">&nbsp;</div>
                </div>
            </th>
            <th>
                <p>Currency conversion, Refund transfer</p>
                <div style="float:right;margin-right:90px;">
                <div class="img-arrow">&nbsp;</div>
                </div>
            </th>
        </tr>
        <tr>
            <td>
                <p>Some text here Some text here Some text here Some text here Some text here</p>
            </td>
            <td>
                <p>Some text here Some text here Some text here Some text here Some text here</p>
            </td>
        </tr>
    </tbody>
</table>

---

如果将单元格间距设置为0，这样的构造通常效果最好。哦，我可以给你一个友好的提示吗。当你使用桌子的时候，你通常会听到很多关于你应该如何避免这些的讽刺评论。在许多情况下，您可以通过在源代码中不放置“此处的一些文本”，而是“此处的一些表格数据”来防止这种情况。那会让他们闭嘴的。

 position: absolute;

<table id="duration-of-refund" border="0">
    <tbody>
        <tr>
            <th>
                <p>Purchases in Webshops</p>
                <div style="float:right;margin-right:90px;">
                <div class="img-at">&nbsp;</div>
                </div>
            </th>
            <th>
                <p>Currency conversion, Refund transfer</p>
                <div style="float:right;margin-right:90px;">
                <div class="img-arrow">&nbsp;</div>
                </div>
            </th>
        </tr>
        <tr>
            <td>
                <p>Some text here Some text here Some text here Some text here Some text here</p>
            </td>
            <td>
                <p>Some text here Some text here Some text here Some text here Some text here</p>
            </td>
        </tr>
    </tbody>
</table>

#duration-of-refund td {
     width: 400px;
 }
 #duration-of-refund th {
     font-size: 21px;
     color: white;
     text-align: left;
     height: 84px;
     max-height: 84px;
 }
 #duration-of-refund tr th:nth-child(1) {
     background-color: #0098da;
 }
 #duration-of-refund tr th:nth-child(2) {
     background-color: #1F5CA9;
 }
 #duration-of-refund tr th:nth-child(1) p, #duration-of-refund tr th:nth-child(2) p {
     width: 190px;
     float: left;
 }
 .img-at, .img-arrow {
     width: 83px;
     height: 84px;
     float: right;
     margin-right: 20px;
     position: absolute;
     top: -20px;
 }
 .img-arrow {
     background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_arrow.png);
 }
 .img-at {
     background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_at.png);
 }
 #duration-of-refund tr td:nth-child(2) {
     background-color: #cceaf8;
 }
}