Нажмите выровненное нижнее фоновое изображение под текстом

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>

Как вы можете видеть, когда столбец сортируется, он получает классы sort и order1, а order1 - это класс, который добавляет фоновое изображение.

Answer 1

Ну ... вот как я это исправил, в основном благодаря Google: 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, не можете ли вы просто указать background-color для a, который позволил бы сделать его текст видимым?

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

Таким образом фон a «выше» фона th.

Или я упускаю что-то действительно очевидное?