问题描述
有人可以告诉我以下CSS为什么不通过验证吗?我一直在自己做研究，没有运气.我读过的所有文档都说这是在css3中进行渐变的正确原因.
Can someone tell me why the following css is not validating? I've been trying to research this myself with no luck. All of the documentation I've read says this is the proper why to do gradients in css3.
#header {
color: white;
font-size: 12px;
font-family: Helvetica, Verdana, Arial, sans-serif;
background: black;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
width: 100%;
height: 35px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px;
position: fixed;
top: 0px;
z-index: 1000;
}
这些是我收到的验证错误:
These are the validation errors I'm getting:
对不起！我们发现以下错误(6)
Sorry! We found the following errors (6)
URI:TextArea
URI : TextArea
6 #header值错误:background-color-moz-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:-moz-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
6 #header Value Error : background-color -moz-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -moz-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
7 #header值错误:background-color -webkit-gradient(linear，left上，左下，停色(0％，rgba(0,0,0,0.65))，color-stop(100％，rgba(0,0,0,0)))不是背景色值:-webkit-gradient(linear，left top，left bottom，color-stop(0％，rgba(0,0,0,0.65)))，color-stop(100％，rgba(0,0,0,0)))
7 #header Value Error : background-color -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.65 ) ),color-stop(100%,rgba(0,0,0,0 ) ) ) is not a background-color value : -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.65 ) ),color-stop(100%,rgba(0,0,0,0 ) ) )
8 #header值错误:背景颜色-webkit-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:-webkit-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
8 #header Value Error : background-color -webkit-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -webkit-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
9 #header值错误:background-color-o-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:-o-linear-gradient(顶部，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
9 #header Value Error : background-color -o-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -o-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
10 #header值错误:background-color-ms-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:-ms-linear-gradient(顶部，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
10 #header Value Error : background-color -ms-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -ms-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
11 #header值错误:background-color线性梯度(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:线性渐变(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
11 #header Value Error : background-color linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
推荐答案
这是以下内容的重复: CSS背景渐变验证
This is a duplicate of: CSS background gradient validation
一个很好的解释是:
如果您尝试在W3C的CSS3中验证此"代码验证程序，它将显示一堆解析错误.这是由于目前CSS3实现的性质，主要是因为创建CSS3渐变所需的供应商前缀.
If you tried to validate 'this' code in W3C’s CSS3Validator, it will show a bunch of parsing errors. This is due to thenature of CSS3 implementation at the moment, and mainly because of thevendor prefixes required to create CSS3 gradients.
现在翻转方面，我们根据浏览器供应商提供的这些渐变.W3C尚未最终确定CSS3规范意味着在此之前我们不会关于CSS3的有效或无效的具体答案.我们现在所能做的就是遵循渐进增强技术，并注意浏览器供应商的指导和正确使用CSS3的实现.
Now on the flipside, we have used correct and "valid" syntax according to thebrowser vendors for these gradients. The fact that W3C has yet tofinalize the CSS3 specifications means until then we will not have aconcrete answer as to what is valid or invalid when it comes to CSS3.All we can do right now is follow progressive enhancement techniques,and pay attention to the browser vendors for direction and properimplementation of CSS3.
这篇关于CSS3背景渐变无法验证，有人可以告诉我为什么吗?里面的代码示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！