css - 通过 CSS 选择背景图片，有什么区别？

Question

我正在研究一些 CSS，到目前为止，所有这些似乎都在做同样的事情:

background: url('/images/file.png');
background: image-url('file.png'); /* Doesn't requires as much info about the path. */
background-image: url('/images/file.png');

有区别还是只是偏好？

Answer 1

你的第一个属性声明是一个速记:

background: #COLOR url('image.png');

这等同于:

background-color: #COLOR;
background-image: url('image.png');

通过省略颜色，您只是在指定图像。

以及来自 CSS2 spec 的属性(property)信息:

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet. The second one is invalid CSS.

第二个只是无效的 CSS。不要使用它。

第三个是首选，因为它不会重置其他属性(也来自规范):

Given a valid declaration, the 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration.