我遇到了一个CSS背景属性,它具有以下值：
background: none repeat scroll 0% 0% #F8F8F8;
background属性的语法在this MDN page中给出,如下所示：
Formal Syntax: [ <bg-layer>,]* <final-bg-layer> where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <Box> || <Box> and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <Box> || <Box> || <background-color>
背景属性值的顺序是否重要？而且,更一般地说：如何解释MDN上提供的“形式语法”.
解决方法
形式语法是
documented at the MDN site itself.对于Stack Overflow来说,“更一般”的问题可能过于宽泛：如果您有任何具体问题,请查看文档并返回.
您遇到的一个具体问题是背景属性值的顺序是否重要.背景的大多数部分(特别是bg层)由“双条”分隔,根据MDN(的形式语法)不需要特定的顺序.在双条上引用specific documentation：
Double bar
Separating two or more components by a double bar,||,means that all entities are options: at least one of them must be present,and they may appear in any order. Typically this is used to define the different values of a shorthand property.
作为一个脚注,尽管我一直喜欢和使用MDN,但是可能更具有说服力的来源是W3.org,你可以在其中找到例如background shorthand syntax以及CSS Values and Units Module Level 3中语法的解释.它基本上是相同的,例如关于“双杠”：
A double bar (||) separates two or more options: one or more of them must occur,in any order.
这在背景属性的实践中有效,正如您可以在此片段中看到的那样,无论顺序如何解析属性相同：
#a { background: 100% / 2% url('http://i.stack.imgur.com/RvUr4.png') red repeat-x; }
#b { background: red repeat-x url('http://i.stack.imgur.com/RvUr4.png') 100% / 2%; }
<div id="a">A</div> <br /> <div id="b">B</div>
