css - 显示具有 css 渐变效果的图像

Question

我正在将 css 渐变效果应用于表格的“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;
}