线性渐变语法不清楚

Question

我试图理解这个 pen，但我很难理解 SCSS 文件中的第 44-45 行：

background: linear-gradient(var(--menu-link-active-color) 0 100%) left / 0 repeat;

我查了很多网站，但找不到关于 linear-gradient() 有 3 个参数的任何信息。而且斜线也很不清楚。我很乐意得到提示或解释这是什么！

Answer 1

这样的渐变意味着纯色放在左边，大小等于0。 0 等同于 0 auto 而 auto 将默认为 100%。所以渐变具有 0 宽度和 100% 高度。

参数 3 是具有 2 个色标的颜色。 red 0 100% 表示在 0 处具有 red 且在 100% 处具有 red 的梯度。您也可以使用 red 0 0.

这里有一个例子可以更好地理解。背景将从 0 变为 100%

.box {
 background: 
   linear-gradient(red 0 0) 
   left / 
   0  
   no-repeat;
  height:100px;
  transition:.5s;
}
.box:hover {
  background-size:100%;
}

<div class="box"></div>

更简单的语法是：

.box {
  background-image: linear-gradient(red, red);
  background-position: left;
  background-size: 0 100%;
  background-repeat: no-repeat;
  height: 100px;
  transition: .5s;
}

.box:hover {
  background-size: 100% 100%;
}

<div class="box"></div>

Answer 2

就目前情况而言：

background: linear-gradient(var(--menu-link-active-color) 0 100%) left / 0 repeat;

什么都不做。

那是因为background-image（线性渐变）之后的3个参数（实际上，在codepen中是不重复的，但这对线性渐变没有影响）是：

position - left - self explanatory 实际上对应于默认值 0

在 / 之后是大小并且它是 0 即元素没有大小

重复（或不重复）

现在，你为什么要问？

嗯，原因是因为悬停。当用户悬停时，大小会发生变化（使用 CSS 计算），以便颜色（通过线性渐变显示为图像）一直扩展到关联的单词。

另请注意，颜色本身由 CSS 变量给出，并且可以根据每个单词或状态更改。

线性渐变语法不清楚

linear-gradient syntax unclear

css

sass

linear-gradients