如何解决CSS:值错误:背景图像是一个不正确的运算符验证失败
为什么以下 CSS 根据 https://validator.w3.org/nu/#textarea 无效(选中 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,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>
解决方法
当您使用多位置颜色停止 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops
时,验证器似乎失败了如果您删除 #ff5722 10% 15%
之类的第二个位置(尝试类似 #ff5722 15%
),则不会显示错误。
我相信这是验证器的问题,而不是你的代码的问题,它是有效的 CSS,它甚至会因为直接从 MDN 复制的代码而失败。
如果您真的想消除该验证错误,您可以将色标一分为二,而不是像 #ff5722 10%,#ff5722 15%
那样使用多色标
它与双色停止#ff5722 10% 15%
有关。验证器似乎不是最新的这种新语法。您可以更新您的代码并使用:
.color {
background-image: linear-gradient(to right,rgb(248,27,27) 7%,#ff5722 10%,#ff5722 15%,#43a047 50%,#43a047 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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。