CSS 验证器错误 = 值错误：背景 100% 不是颜色停止值）

Question

我对编程很陌生，我将代码片段导入到我的 CSS 中，以获得悬停在链接上的效果。 当我通过 W3C CSS Validator 推送代码时，我收到一个来自此导入代码的错误。

我不明白我能做些什么来消除错误，因为悬停效果完美无缺。

谁能帮我？ 将不胜感激！

错误：

值错误：背景 100% 不是颜色停止值）

代码：

 :root { --mainColor: #ffc7c7; } .details-schedule { align-items: center; display: flex; font-family: 'Libre Franklin', sans-serif; font-size: 16px; justify-content: center; } .details-schedule a { background: linear-gradient( to bottom, var(--mainColor) 0%, var(--mainColor) 100% ); background-position: 0 100%; background-repeat: repeat-x; background-size: 4px 4px; color: #000; text-decoration: none; transition: background-size .6s; } .details-schedule a:hover { background-size: 4px 50px; }

Answer 1

这似乎是 W3C CSS 验证器的一个怪癖，也是一个错误。 任何值，例如 2%，都会产生相同的误差。

如果您将第二个 var(-mainColor) 替换为实际颜色（如蓝色）或十六进制值 —mainColor ，则验证器很高兴，因此如果通过验证对您的项目很重要，那么现在可能会这样做。

顺便说一句，验证器也无法处理像 rgba(0,0,0,1) 这样的颜色，所以它似乎在解析括号时有问题。