推送下方文本對齊的背景圖像

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的背景。

或者我錯過了一些非常明顯的東西？