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渐变背景颜色不工作，变成灰色的表头

回答

相关问题