推送下方文本对齐的背景图像

Question

我知道这有点奇怪，相信我不是这样做的方式，但我得到了这个项目，现在我必须忍受它。

我有一张可在我的页面上排序的表格（使用DisplayTag库创建），并指示将哪个列排序后台图像分配给列标题。

我遇到的问题是，图像越来越多地显示在文本上（或者后面......不能用黑色显示黑色：\）显然这是可以预料的，因为它是一个背景图像的实际图像。

我想知道是否有人知道一种方式，我可以确保背景图像不显示，直到使用CSS文本后。我意识到改变它将是更智能的路线，但在这个时候是一个因素，改变它需要太多的工作。

任何意见是赞赏！

代码：

显示标签表定义

<display:table name="results" class="displayTag" sort="list" export="true" pagesize="0" requestURI="queryReportResult.action"> 
    <% for (int i=0; i < displayProperties.length; i++) { %> 
     <display:column property="<%=displayProperties[i].getName()%>" title="<%=displayProperties[i].getDisplayName()%>" decorator="<%=displayProperties[i].getDecorator()%>" sortable="true" headerClass="sortable" /> 
    <% } %> 
    <display:setProperty name="export.pdf" value="true"/> 
    <display:setProperty name="export.xml" value="false"/> 
    <display:setProperty name="export.pdf.filename" value="<%=report.getName() + \".pdf\"%>"/> 
    <display:setProperty name="export.csv.filename" value="<%=report.getName() + \".csv\"%>"/> 
    <display:setProperty name="export.excel.filename" value="<%=report.getName() + \".xls\"%>"/>  
    </display:table> 

CSS定义

table.displaytag a {   
    font-size: 10pt; 
} 

table.displaytag th { 
    padding-left: 5px; 
    padding-right: 15px; 
    font-size: 10pt; 
    border-bottom: 1px solid black; 
} 

table.displaytag th.sorted a,table.displaytag th.sortable th.sortable-right a { 
    background-repeat: no-repeat; 
    background-position: right; 
    display: block; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
} 

table.displaytag th.order1 a { 
    background-image: url(../images/down-arrow.png); 
    background-position: bottom center; 
} 

table.displaytag th.order2 a { 
    background-image: url(../images/up-arrow.png); 
    background-position: bottom center; 
} 

而实际的代码页

<th class="sortable"> 
<a href="queryReportResult.action?d-49653-s=4&amp;d-49653-o=2&amp;d-49653-p=1">This Info </a></th> 
<th class="sortable sorted order1"> 
<a href="queryReportResult.action?d-49653-s=5&amp;d-49653-o=1&amp;d-49653-p=1">Other Info </a></th> 

<th class="sortable"> 
<a href="queryReportResult.action?d-49653-s=6&amp;d-49653-o=2&amp;d-49653-p=1">Info </a></th> 

正如你可以看到，当该列分类g ets已排序和order1类，而order1是添加背景图像的类。

Answer 1

嗯......这里就是我解决了这个问题之一，由于主要是谷歌：d

我基本上只是对齐背景图像的底部，然后添加一个边距，使文本不能写一直到底部。

这是代码！

table.displaytag th.sorted a,table.displaytag th.sortable th.sortable-right a { 
    background-repeat: no-repeat; 
    background-position: right; 
    display: block; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
} 

table.displaytag th.order1 a { 
    background-image: url(../images/down-arrow.png); 
    background-position: bottom center; 
    margin-bottom:15px; 
} 

table.displaytag th.order2 a { 
    background-image: url(../images/up-arrow.png); 
    background-position: bottom center; 
    margin-bottom:15px; 
} 

Answer 2

假设在th纯文本包含在a标签内，你能不能只指定a将允许其文本是可见的一个background-color？

th > a { 
    color: #000; 
    background-color: #fff; 
    /* other css */ 
} 

这样的a的背景为“上面”的th的背景。

或者我错过了一些非常明显的东西？