CSS渐变背景色不工作，表格标题变为灰色

我有一张桌子，用CSS定制，一切都很好

纯色很好用

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

这是演示，你可以看到它现在是绿色的

---

现在问题来了，在定制了绿色渐变颜色后，我看到的是灰色

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

---

演示

您的代码在第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");
}

这里有一个更新的

我在

.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);
 }

对于相同的

标题

，我给出了一个

渐变

id，因为它都是关于：

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>

汽车

像这样修改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;
}

问题是背景和背景图像与边距 ，右边距。 这就是为什么一个类（背景：）覆盖另一个相同的类（背景图像：）

---

这很有效。。但是你能让标题文本中心对齐，并使最右边的箭头对齐吗？这很简单！添加：

padding:3px6px到第21行的
th
。点击标题，颜色变为solid.table.tablesorter thead tr th，table.tablesorter tfoot tr th{border:1px solid#ffffffff；}请更新这个类。我在jsfiddel中更新过，也请检查@skyline33