了解css背景速记属性

时间:2014-08-29 06:54:25

标签: css background

css background属性的简写定义如下:

background: color position/size repeat origin clip attachment image|initial|inherit;

但后来我找到了以下例子:

body { 
  background: #00ff00 url('smiley.gif') no-repeat fixed center; 
}

所以这里的顺序是:color-image-repeat-attachment-position

这个订单有什么原因可以改变吗?

1 个答案:

答案 0 :(得分:1)

速记属性尽量不强制使用属性值的特定顺序,但是当这些属性具有不同类型的值但在这些属性具有相同值时则不适用。

背景速记属性具有不同类型的值,因此值的顺序不应导致错误,但是您应该遵循标准顺序以保持良好的可读性。

这是mozilla开发中心关于速记属性的手册,我引用该命令的陈述可以在第3点的'Tricky Edge Cases'中看到。

https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties