在 CSS 中，什么时候/应该使用 `url()` 函数而不是字符串？

Question

有什么区别

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

和

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

?

同样，

@import 'file.css';

对比

@import url('file.css');

Answer 1

According to MDN <image> article:

These are valid image values:

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.

These are invalid image values:

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

Since the value of background-image must be one or more <image> (or none), the difference is that background-image: url('bg.png') is valid and background-image: 'bg.png' is invalid.

For @import, the spec says they are equivalent:

The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.

The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and one with a bare string):

@import "mystyle.css";
@import url("mystyle.css");

Answer 2

In my testing and research, background-image: 'bg.png'; is completely invalid. According to MDN, background-image must be defined as a keyword or an <image> which when referencing an image file must use the url function.

For @import however, the url function is optional and there is no difference.

Invalid:

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

Valid:

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

Valid and Identical:

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