CSS漸變背景顏色不工作，變成灰色的表頭

我有一個表，並與CSS，以及所有定製..CSS漸變背景顏色不工作，變成灰色的表頭

純色工作正常..

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { 
background-color:#32cd80; 
color:#000000

這裏是演示http://jsfiddle.net/20v000ax/，你可以看到它是綠色的，現在

現在，這裏的問題就來了，綠色漸變色自定義之後，我看到一個灰色代替。

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { 
    background: rgba(122, 255, 82, 1); 
    background: -moz-linear-gradient(left, rgba(122, 255, 82, 1) 0%, rgba(50, 205, 205, 1) 100%); 
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(122, 255, 82, 1)), color-stop(100%, rgba(50, 205, 205, 1))); 
    background: -webkit-linear-gradient(left, rgba(122, 255, 82, 1) 0%, rgba(50, 205, 205, 1) 100%); 
    background: -o-linear-gradient(left, rgba(122, 255, 82, 1) 0%, rgba(50, 205, 205, 1) 100%); 
    background: -ms-linear-gradient(left, rgba(122, 255, 82, 1) 0%, rgba(50, 205, 205, 1) 100%); 
    background: linear-gradient(to right, rgba(122, 255, 82, 1) 0%, rgba(50, 205, 205, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7aff52', endColorstr='#32cdcd', GradientType=1); 
    color:#000000

演示http://jsfiddle.net/20v000ax/1/

來源

2014-10-30 skyline33

您的代碼被寫在上線63：

table.tablesorter thead tr .header { 
    background-image: url("img/bg.png"); 
}

，之後上線73：

table.tablesorter thead tr .headerSortDown { 
    background-image: url("http://i.imgur.com/5rUFJ8h.png"); 
}

這裏有一個更新的fiddle。

我已在.header裏爲這些箭頭添加了span。

table.tablesorter thead tr span { 
    display: block; 
    background-repeat: no-repeat; 
    background-position: right center; 
} 
table.tablesorter thead tr .headerSortUp span { 
    background-image:url(http://i.imgur.com/X1GzAnN.png); 
} 
table.tablesorter thead tr .headerSortDown span { 
    background-image:url(http://i.imgur.com/5rUFJ8h.png); 
}

我給了一個gradientID爲同一header，因爲它是所有關於css specificity：

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp, 
table.tablesorter thead tr #gradient { 
    ... 
}

所以現在th看起來是這樣的：

<th id="gradient" class="header headerSortDown"><span>Car</span></th>

來源

2014-10-30 08:08:11

這一工程..但你可以做的標題文字居中對齊和箭頭在最右邊？ – skyline33 2014-10-30 08:30:54

很簡單！在第21行添加：'padding：3px 6px;'到'th'。 – 2014-10-30 08:42:21

我明白了，現在一切都很好。 – skyline33 2014-10-30 08:59:17

像這樣修改CSS代碼

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr { 
background-color: #32cd80; 
color: #000000; 
background: -webkit-linear-gradient(red, blue); 
background: -o-linear-gradient(red, blue); 
background: -moz-linear-gradient(red, blue); 
background: linear-gradient(red, blue); 
}

修改下面

類

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { 
color: #000000; 
}

workking fiddel

問題是背景和背景圖像兩者都是象餘量，餘量右同一類。就是爲什麼一個類（背景:)類覆蓋另一個相同的類（背景圖像:)

enter image description here

來源

2014-10-30 08:50:15 yugi

單擊標題顏色變爲固體。 – skyline33 2014-10-30 09:03:03

table.tablesorter thead tr th，table。tablesorter tfoot tr th { border：1px solid #ffffff; }請更新此課程。我在jsfiddel更新也請查看@ skyline33 – yugi 2014-10-30 09:13:46

CSS漸變背景顏色不工作，變成灰色的表頭

回答

相關問題