css - CSS元素的顺序

标签 css

有两个CSS语句，但在声明中的顺序不同。

.wrap {
    background-color: rgba(255, 255, 255, 0.4);
    min-height:600px;
    background: url('/images/bg.jpg');
    background-size: cover;
    max-width: 100%;
}

和

.wrap {
    background: url('/images/bg.jpg');
    background-size: cover;
    max-width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    min-height:600px;
}

区别只是background: url()和background-color之间元素的顺序不同，如果background: url() 在background-color之后声明，没有图片可以加载，则background-color不能生效。似乎 background: url() 覆盖了 background-color。

Demo可以从http://jsfiddle.net/yckelvin/ctgc8xzL/找到

声明中元素顺序的CSS语法有定义吗？我阅读了 w3schools.com，但没有此类信息。

最佳答案

当您使用快捷方式 background 属性时，任何未指定的背景属性(例如 background-color)都将设置为初始默认值。

所以如果background属性在background-color之后声明而不指定一种颜色，然后背景颜色采用 transparent 的初始值。

这是 CSS 规范的一部分:

http://www.w3.org/TR/css3-background/#the-background

关于css - CSS元素的顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26111692/