CSS背景图片 - 正确的使用方法是什么？

Question

CSS的background-image属性应该如何正确使用?

1. 它需要加引号吗，例如：background-image: url('images/slides/background.jpg');
2. 它可以是相对路径（如上所示）还是必须是完整的URL?
3. 我应该注意哪些其他方面以确保它能在符合标准的浏览器中正常工作。

- Robert MacLean

---

请参考以下链接：https://dev59.com/hnI95IYBdhLWcg3wwwyY - harpo

注意：在Netbeans 7中，如果您在url（）内部留下未引用的路径，您将收到警告“意外值令牌url”。如果您将路径放在单引号或双引号中，则警报将消失。 - kante

这个问题已经在7.3版本中得到了修复。http://netbeans.org/bugzilla/show_bug.cgi?id=209067 - caiosm1005

请参见 Is quoting the value of url() really necessary? 中的引用。 - unor

如果你的样式表文件在一个文件夹中（我们称之为css）并且被链接，而不是在你的文档的<style>部分中，路径将相对于该文件夹；浏览器将在css文件夹下寻找images文件夹：css/images/image.jpg。 - Tim

Answer 1

路径可以是完整的或相对的（当然，如果图像来自另一个域，必须是完整的）。

在URI中，您不需要使用引号，语法可以是：

background-image: url(image.jpg);

或者

background-image: url("image.jpg");

不过，在W3中提到：

在未使用引号的URI中出现的某些字符，例如括号、空格、单引号（'）和双引号（"），必须用反斜杠进行转义，以便生成的URI值是一个URI令牌：'\(', '\)'。

所以在这种情况下，必须使用引号或双引号，或者转义这些字符。

- Alex Rozanski

Answer 2

1. 不需要引号。

2. 可以使用，但请注意相对URL是从你的样式表的URL解析出来的。

3. 最好不要使用引号。我认为有些客户端无法理解它们。

- Gumbo

Answer 3

1）加上引号是一个好习惯。

2）它可以是相对路径，例如：

background-image: url('images/slides/background.jpg');

将在加载CSS的文件夹中查找图像文件夹。因此，如果图像位于另一个文件夹中或不在CSS文件夹树中，则应使用绝对路径或相对于根路径的路径（以/开头）。

3）您应该使用完整声明的background-image属性，以使其在符合标准的浏览器中表现一致，例如：

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

- TheVillageIdiot

---

你是不是指的是 background 而不是 background-image？ - Gumbo

因为有时候图像名称或路径名称中会有空格，这可能会导致问题。 - TheVillageIdiot

@TheVillageIdiot 在第三行中，它的 background-image 不应该像 @Gumbo 建议的那样改为 background 吗？ - KNU

Answer 4

如果您的图像文件在CSS文件所在的独立目录中，并且您希望相对路径从您网站的根目录开始：

background-image: url('/Images/bgi.png');

- Amin Saqi

---

我并不是在寻找是否可以使用相对路径，而是在寻找如何使用相对路径...因为你清楚指出了路径的起始位置，所以给你点赞。 - me_

Answer 5

相对路径没问题，不需要引号。另一个有用的技巧是使用“速记”background属性，在图像无法加载或出现其他问题时指定背景颜色。

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

请注意，您可以指定图像是否重复以及重复的方向（如果未指定，则默认水平和垂直重复），以及图像相对于其容器的位置。

- Bryan

Answer 6

请检查目录结构，确定图像所在位置。例如，如果您有一个CSS文件夹和一个位于CSS文件夹外面的图像文件夹，则必须使用"../images/image.jpg"，这样它就可以像我一样正常工作了，只需确保目录结构正确。

- sunny

Answer 7

只需在您的CSS文件中编写以下内容：

background:url("images/logo.jpg")

- BERGUIGA Mohamed Amine

Answer 8

如果您从CSS文件中使用图像，实际上不需要引号，可以直接使用

{background-image: url(your image.png/jpg etc);}

- Athini Watu

Answer 9

你不需要使用引号，可以使用任何你喜欢的路径！

- Rigobert Song

Answer 10

请查看相应的SitePoint参考页面background-image和URIs

1. 它不必使用引号，但如果您喜欢，可以使用它们。（我认为IE5 / Mac不支持单引号）。
2. 相对路径和绝对路径都是可能的； 相对路径是相对于CSS文件的路径。

- Ben