时间戳

首页 > 解决方案 > CSS：值错误：背景图像是不正确的运算符）（验证失败）

css - CSS：值错误：背景图像是不正确的运算符）（验证失败）

问题描述

为什么根据https://validator.w3.org/nu/#textarea（选中该CSS框），以下 CSS 无效，而浏览器却可以很好地呈现代码？

.color {
    background-image: linear-gradient(to right, rgb(248, 27, 27) 7%, #ff5722 10% 15%, #43a047 50% 60%, #7e57c2 92%, indigo);
}

值错误：背景图像是不正确的运算符

.color {
  background-image: linear-gradient(to right, rgb(248, 27, 27) 7%, #ff5722 10% 15%, #43a047 50% 60%, #7e57c2 92%, indigo);
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
}
<p class="color">testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing</p>

<p>testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content</p>

标签： csslinear-gradients

解决方案

当您使用多位置颜色停止时，验证器似乎失败了https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops

如果您删除诸如#ff5722 10% 15%（尝试类似#ff5722 15%）之类的第二个位置，则不会显示错误。

我相信这是验证器的问题，而不是您的代码的问题，它是有效的 CSS，它甚至会因直接从 MDN 复制的代码而失败。

如果您真的想消除该验证错误，您可以将颜色停止拆分为 2，而不是使用多个停止，如#ff5722 10%, #ff5722 15%

推荐阅读