Question

之间的区别是什么

.class { background-image: 'bg.png'; }

和

.class { background-image: url('bg.png'); }

同样地，

@import 'file.css';

VS

@import url('file.css');

Answer 1

根据MDN <image> article：

这些是有效的图像值：

url(test.jpg)                          The url() function, as long as test.jpg is an image
linear-gradient(to bottom, blue, red)  A <gradient>
element(#colonne3)                     A part of the page, used with the element() function, if colonne3 is an existing CSS id on the page.

这些是无效的图像值：

cervin.jpg                             An image file must be defined using the url() function.
url(report.pdf)                        The file pointed by the url() function must be an image.
element(#fakeid)                       If fakeid is not an existing CSS id on the page

由于background-image的值必须是一个或多个<image>（或none），不同之处在于background-image: url('bg.png')有效且background-image: 'bg.png'无效

对于@import，spec表示它们是等效的：

'@import'关键字必须后跟要包含的样式表的URI。字符串也是允许的;它将被解释为它周围有url（...）。

以下几行的含义相同，并说明了两者   '@import'语法（一个带有“url（）”，一个带有一个裸字符串）：
@import "mystyle.css";
@import url("mystyle.css");

Answer 2

在我的测试和研究中，background-image: 'bg.png';完全无效。根据MDN，background-image必须定义为关键字或<image>，在引用图像文件时必须使用url函数。

对于@import，url函数是可选的，没有区别。

<强>无效：

.class {
    background-image: 'bg.png';
}

<强>有效：

.class {
    background-image: url('bg.png');
}

有效且相同：

@import 'file.css';
@import url('file.css');

在CSS中，何时/应该使用`url（）`函数而不是字符串？

2 个答案: