html - 按钮对齐文本下方的背景图像

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>

如您所见，当对列进行排序时，它会获得 sorted 和 order1 类，而 order1 是添加背景图像的类。

Answer 1

假设 th 中的唯一文本是包含在 a 标签中的文本，您能否不只为 background-color 指定允许其文本可见的a？

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

这样，a 的背景“高于”th 的背景。

还是我遗漏了一些非常明显的东西？