如何使用css实现以下功能(背景颜色与背景图像重叠标题行):
这是表格中TH细胞的一部分。 TH行的颜色为#0098da,TH单元格的末尾为图像(图像的网址为http://tax.allfaces.lv/templates/tax/images/pg_arrow.png)。
我试图在TH中使用bg图像定位div,但我遇到的问题是图像应该与TH边界重叠。结果我得到了以下信息:
HTML:
<table id="duration-of-refund" border="0">
<tbody>
<tr>
<th>
<p>Purchases in Webshops</p>
<div class="img-at"> </div>
</th>
<th>
<p>Currency conversion, Refund transfer</p>
<div class="img-arrow"> </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>
CSS:
#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: relative;
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;
}
}
JSfiddle示例:http://jsfiddle.net/rAVqx/
我认为,这应该是另一种方法。
请给我一些线索如何实现这一目标?我还有其他具有不同图像的TH细胞以相同的方式定位。
答案 0 :(得分:0)
试试这个 将图像类标记放在另一个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"> </div>
</div>
</th>
<th>
<p>Currency conversion, Refund transfer</p>
<div style="float:right;margin-right:90px;">
<div class="img-arrow"> </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>
<强> CSS:强>
#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;
}
}