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 规范的属性信息：

'background' 属性是一个简写属性，用于在样式表中的相同位置。第二个是无效的CSS。

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

第三个是首选，因为它不会重置其他属性（也来自规范）：

给定一个有效的声明，'background' 属性首先将所有单独的背景属性设置为其初始值，然后分配声明中给出的显式值。