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