CSS3中的背景速记顺序

Question

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

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

是古老的CSS2“看，我说唱”（ CIRAP ）acronim或多或少吸引人......但即使有W3C没有明确表达订单？！...

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

他们的例子令人困惑......通过ex，以下人员相信订单是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-position / background-size之前放置background-repeat ，它们可以为您提供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 */;
}

Answer 3

Microsoft指定的正确顺序是：

• 颜色
• 位置
• 尺寸
• 重复
• 起源
• 夹
• 附件
• 图片

Answer 4

我学会了根本不使用background速记属性，原因如下：

1. 跨浏览器和编辑器的混合实现
2. 它将缺少的属性设置为其初始值 - 这将覆盖任何先前设置的值
3. 某些属性共享相同的值，这会导致很多混淆。

在这种特殊情况下，选择清晰度和一致性而不是性能。 我还要提一下，性能提升可以忽略不计。

资料来源： Todd McLeod