Question

我有以下标记：

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

这是为什么？我读到浏览器将渐变视为图像（或那个棒球场中的东西），那么这甚至可能按照我的方式进行处理吗？或者有什么技巧可以做到这一点？

Answer 1

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

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

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

<label class=trigger style="--c:red;" >some text </label>

继承用于线性渐变的背景颜色

1 个答案: