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) 這樣的顏色，所以它似乎在解析括號時有問題。