CSS渐变背景颜色不起作用，在表头上变成灰色

Question

我有一张桌子，用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

demo http://jsfiddle.net/20v000ax/1/

Answer 1

您的代码将在第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 。

我在span内为这些箭头添加了.header。

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

我为同一个gradient提供了header ID ，因为它完全是关于 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>

Answer 2

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

问题是背景和背景图片两者都是同一类，如保证金 ，<强>余量右即可。 为什么一个类（background：）类会覆盖另一个同一个类（ background-image :)