カスタムプロパティを使用して背景画像とグラデーションを組み合わせる

Question

背景色としてソートアイコンとグラデーションを持つテーブル見出しが必要です。
グラデーションには、カスタムプロパティを使用するためにがあります。

Iは、次のシナリオを試みた：これは、所望の効果を生成

1. background: url("../images/sort_both.png") no-repeat 100%, linear-gradient(top, #e16969 0%,#cc0101 100%);
   を：ソートアイコンの勾配
2. background: url("../images/sort_both.png") no-repeat 100%, linear-gradient(top, var(--verlauf_hell) 0%,var(--verlauf_dunkel) 100%);
   これは、アイコンなしの灰色のセルを作成します。
3. background: url("../images/sort_both.png") no-repeat 100%, linear-gradient(top, --var(--verlauf_hell) 0%, --var(--verlauf_dunkel) 100%);
   これにより、目的のグラデーションが得られますが、アイコンは表示されません。別のファイルで

は、他のどこでもうまく働いているこのコードは、次のとおりです。

:root { 
    --hauptfarbe_hell: #ff8080; 
    --hauptfarbe_dunkel: #cc0000; 
    --verlauf_hell: #ff0000; 
    --verlauf_dunkel: #960000; 
} 

だから、私の質問は、私はこの問題を解決することができる方法ですか？私はカスタムプロパティを理解しているので、2番目の例で正しく使用しました。

ありがとうございます。

Answer 1

バックグラウンドのプロパティを個別に設定してみてください。

は、より多くの詳細については、この回答を参照してください。https://stackoverflow.com/a/2547064/5385381

:root { 
 
    --hauptfarbe_hell: #ff8080; 
 
    --hauptfarbe_dunkel: #cc0000; 
 
    --verlauf_hell: #ff0000; 
 
    --verlauf_dunkel: #960000; 
 
} 
 
    
 
td { 
 
    background-repeat: no-repeat; 
 
    background-color: var(--verlauf_hell); 
 
    background-image: url("../images/sort_both.png"); 
 
    /* fallback */ 
 
    background-image: url("../images/sort_both.png"), linear-gradient(var(--verlauf_hell) 0%, var(--verlauf_dunkel) 100%); 
 
    /* W3C */ 
 
} 
 
    
 
    
 
table { 
 
    width:100%; 
 
}

<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <table>

注：あなたは、より広くサポートされているソリューションのためLESSやSASSの代わりに、CSS変数を使用することを検討すべきです。