CSS: Value Error : background-image is an incorrect operator ) (validation fails)
CSS: Value Error : background-image is an incorrect operator ) (validation fails)
为什么根据 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>
当您使用多位置色标时,验证器似乎失败了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);
}
为什么根据 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>
当您使用多位置色标时,验证器似乎失败了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);
}