继承背景颜色以在线性渐变中使用答案

【问题标题】：Inherite the background color to use in a linear-gradient继承背景颜色以在线性渐变中使用
【发布时间】：2021-09-11 21:36:23
【问题描述】：

我有以下标记：

  <label
    className={classes.trigger}
    htmlFor={uniqueId}
    ref={labelRef}
    style={{ background: val, borderColor: val }}
  />

css如下：

.trigger {
  display: block;
  position: relative;


  &::before {
    content: "";
    position: absolute;
    height: 40px;
    width: 40px;

    /* this works*/
    // background: inherit; 

    /*This dosn't*/
    background: linear-gradient(90deg, inherit, #00000000); 
  }
}

我想要一个淡出的背景颜色，我正在以编程方式设置背景颜色。

当我简单地说

background: inherit;

效果很好，但是当我想让它看起来像使用线性渐变褪色时，它不再起作用了

background: linear-gradient(90deg, inherit, #00000000);

这是为什么呢？我读到浏览器将渐变视为图像（或该球场中的某物），那么这甚至可以按照我的方式进行吗？或者有什么诀窍可以做到这一点？

【问题讨论】：

你考虑过 CSS 变量吗？
@TemaniAfif 哦，这是一个想法，你的意思是通过编程定义一个，并在 css 中使用它？这可以工作....虽然我将拥有的项目数量是动态的，所以我不知道我需要多少个 css 变量，我不知道为每个变量定义一个是否是个好主意项目...
查看这个答案：stackoverflow.com/a/49618941/8620333
@TemaniAfif 谢谢！那成功了！我虽然只能在根元素中定义变量......事实上你可以在每个元素上定义它们是一个游戏规则改变者，谢谢

标签： javascript html css reactjs sass

【解决方案1】：

正如评论，只需使用 CSS 变量：

.trigger {
  display: block;
  position: relative;
}

.trigger::before {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  background: linear-gradient(90deg, var(--c), #00000000);
}

&lt;label class=trigger style="--c:red;" &gt;some text &lt;/label&gt;

【讨论】：

好的，谢谢！不知道您可以将变量应用于单个元素，很酷。