css - cssGradiant効果のある画像を表示する

Question

このようなテーブルの「th」列にcssグラディアント効果を適用しています。

    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クラスを追加しています。しかし、グラデーション効果のため、画像は表示されていません。この問題を解決するにはどうすればよいですか。

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