Question

我希望表格标题包含排序图标和渐变作为背景颜色渐变具有以使用自定义属性。

我尝试了以下方案：

background: url("../images/sort_both.png") no-repeat 100%, linear-gradient(top, #e16969 0%,#cc0101 100%);
这会产生所需的效果：带有排序图标的渐变
background: url("../images/sort_both.png") no-repeat 100%, linear-gradient(top, var(--verlauf_hell) 0%,var(--verlauf_dunkel) 100%);
这会创建没有图标的灰色单元格。
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;
}

所以，我的问题是如何解决这个问题？由于我了解自定义属性，我在第二个示例中正确使用了它们。

提前致谢：）

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变量来获得更广泛支持的解决方案。

使用自定义属性

1 个答案: