Question

我正在将css gradiant效果应用到这样的表的“th”列，

    background: -moz-linear-gradient(top,white 5%,#D6DFE3);
    background: linear-gradient(top,white 5%,#D6DFE3);

后来我必须附加一个类，其中css就是这样一个我要显示图像的东西

.Img
{
  background-image:url(../images/asc.png);
  background-color:Green;
}

我附加 .Img类 th 。但由于渐变效应，图像未显示。我该如何解决这个问题。

Answer 1

您可以使用<img>中的<th>标记或<span>或<button>等任何其他标记，并为其指定所需的背景风格

Answer 2

我解决了这个问题

th{
    background: -moz-linear-gradient(top,white 5%,#D6DFE3);
    background: linear-gradient(top,white 5%,#D6DFE3);
}

.Img
{
  background :url(../images/asc.png),  -moz-linear-gradient(top,gray 5%,#D6DFE3) !important;
  background: url(../images/asc.png), linear-gradient(top,gray 5%,#D6DFE3) !important;

  background-position:right center !important;
  background-repeat:no-repeat !important;
}

！important 标记为我做了诀窍。我能用！important

覆盖行为

Answer 3

试试这个：

th{
    background: -moz-linear-gradient(top,white 5%,#D6DFE3);
    background: linear-gradient(top,white 5%,#D6DFE3);
    z-index:-1;
}
.Img
{
    background-image:url(../images/asc.png);
    background-color:Green;
    z-index:1;position:absolute;
}

用css渐变效果显示图像

3 个答案: