10

HTML5 microsoft 认证中有关于 CSS3背景速记中选择器的正确顺序的问题......但我搜索，搜索......但没有在某处找到有效参考该速记中的实际顺序优先级是什么（如果有的话)...

W3C 关于这个问题的建议在这个主题上不是很明确（至少，没有明显找到该信息）....

是古代 CSS2 “看，我说唱”（CIRAP）缩写词或多或少朗朗上口......但即使有 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- image '，'background- position '，'background- size '，'background- repeat '，'background- origin '，'background -将'和'背景-附件'剪辑到该属性的初始值，然后分配在声明中为该层指定的任何显式值。最后，'background- color ' 设置为指定的颜色（如果有），否则设置为其初始值。

所以，这就是我们如何获得IPSROClACo

4

4 回答 4

13

是明确写的：

价值：

[ <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。

于 2013-10-29T16:58:54.263 回答
5

问：正确的顺序是什么选择器CSS3 背景速记中的值？

A:任何订单

背景状态的MSDN 文档...

最多五个以下以空格分隔的值，按任意顺序：

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

MSDN 文档缺少更新的 CSS3 速记属性，但答案仍然是……任意顺序

进一步挖掘，甚至MDN的背景文档（确实包括 CSS3 语法）状态......

以下一项或多项，以任意顺序：

<'背景附件'> 见背景附件

<'背景剪辑'> 见背景剪辑

<'背景色'> 见背景色

<'背景图像'> 见背景图像

<'background-origin'> 见 background-origin

<'背景位置'> 见背景位置

<'background-repeat'> 见背景重复

<'背景尺寸'> 见背景尺寸。此属性必须在 background-position 之后指定，用“/”字符分隔。

一个基本的例子：jsfiddle example

.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 */;
}
于 2013-10-29T18:29:26.887 回答
0

微软指定的正确顺序是：

  • 颜色
  • 位置
  • 尺寸
  • 重复
  • 起源
  • 夹子
  • 附件
  • 图片
于 2015-11-15T18:51:29.297 回答
0

background由于以下原因，我已经学会了根本不使用速记属性：

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

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

资料来源：托德麦克劳德

于 2017-10-20T04:54:38.137 回答