CSS3中的背景速记顺序

Question

关于CSS3 背景中的选择器的正确顺序,HTML5微软认证中存在一些问题...但是我搜索,搜索了......但是找不到某个地方有效的参考,这个简写中的实际顺序优先级(如果有的话) )...

关于这个问题的W3C建议在这个问题上并不十分明确(至少,找到这些信息并不明显)....

是古老的CSS2"看,我说唱"(CIRAP)acronim或多或少吸引人......但即使有W3C没有明确表达订单？!...

如果没有人知道标准,那么这些问题在证书中的含义是什么？最后,CSS3中的正确顺序是什么？

他们的例子令人困惑......以前,以下让人相信顺序是 CIRAPCOS

另一个例子显示了等价:

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto }

然后规范提到:

给定一个有效的声明,对于每一层,速记首先设置每个"背景图像 ","背景位置 ","背景大小 ","背景重复 ","背景原点 ","背景" 的相应图层.- 将''和'background- attachment ' 剪辑到该属性的初始值,然后在声明中指定为此图层指定的任何显式值.最后,'background- color '设置为指定的颜色(如果有),否则设置为其初始值.

所以,这就是我们获得的方式 IPSROClACo

Answer 1

是明确写的:

值:

[ <bg-layer> , ]* <final-bg-layer>

哪里:

<bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
<final-bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
    || <'background-color'>

一个给我们IPSRABC的例子:

background: 
    url("content.jpg") 
    left top / 200px 70px
    no-repeat
    scroll
    content-box content-box
    white;
/* or */
background-image: url("content.jpg") ;
background-position: left top;
background-size: 200px 70px;
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: content-box;
background-origin: content-box;
background-color: white;

如果你想要一个助记符,这里有一个(而且,我完全打开任何更好的句子!):

我小便先生,艾比!看？(IPSRABC)

注意:你可以放在background-repeat之前background-position / background-size,它给你IRPSABC.

Answer 2

问:什么是正确的顺序 选择 CSS3背景中的值是简写吗？

答:任何订单

关于背景状态的MSDN文档 ......

以任何顺序最多五个以下以空格分隔的值:

• color - background-color属性可用的任何颜色值范围.
• image - background-image属性可用的任何图像值范围.
• repeat - background-repeat属性可用的任何重复值范围.
• 附件 - background-attachment属性可用的任何附件值范围.
• position - background-position属性可用的任何位置值范围.

MSDN文档缺少更新的CSS3速记属性,但答案仍然是......任何订单

进一步挖掘,甚至MDN文档的背景(包括CSS3语法)声明......

以下任何一种或多种顺序:

<'background-attachment'>请参阅背景附件

<'background-clip'>请参阅background-clip

<'background-color'>请参阅background-color

<'background-image'>请参阅background-image

<'background-origin'>参见background-origin

<'background-position'>参见background-position

<'background-repeat'>请参阅background-repeat

<'background-size'>请参阅background-size.必须在background-position之后指定此属性,并以"/"字符分隔.

一个基本的例子:jsfiddle例子

.box1 {
    background-image: url(//placehold.it/100/f00);
    background-position: center center;
    background-color: red;
}
.box2 {
    background: 
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */
        red /* background-color */;
}
.box3 {
    background: 
        center center /* background-position */
        url(//placehold.it/100/f00) /* background-image */
        red /* background-color */;
}
.box4 {
    background: 
        red /* background-color */
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */;
}