线性梯度语法不清楚答案

【问题标题】：linear-gradient syntax unclear线性梯度语法不清楚
【发布时间】：2022-01-20 05:06:46
【问题描述】：

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

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

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

【问题讨论】：

“CSS 线性渐变”的第一个搜索结果显示了它如何具有许多参数以及如何使用它们：developer.mozilla.org/en-US/docs/Web/CSS/gradient/…
同一个站点有很好的文档说明如何在 background 属性中使用斜线：developer.mozilla.org/en-US/docs/Web/CSS/background
@Sean 你能用你分享的链接解释他的情况吗？语法问题不是传统问题，您很少会在文档中找到它，因此即使您有文档也不容易理解
我实际上在网上搜索了至少一个小时。可能更多。我已经检查了这个属性的文档并尝试更改笔的 css，但是，我绝对无法理解语法。

标签： css sass linear-gradients

【解决方案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%;
}

&lt;div class="box"&gt;&lt;/div&gt;

更简单的语法是：

.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%;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

目前是这样的：

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

什么都不做。

这是因为在背景图像（线性梯度）之后的 3 个参数（实际上，它在 codepen 中没有重复，但这对线性梯度没有影响）是：

位置 - 左 - 不言自明，实际上对应于默认值 0

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

重复（或不重复）

现在，你为什么要问？

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

还要注意，颜色本身是由 CSS 变量给出的，并且可以根据每个单词或状态而改变。

【讨论】：