背景图像不工作外部CSS

Question

我正在使用head标签中的css进行项目。我现在已经将它作为一个外部文件链接，所有内容都是样式的，但它不会带来背景图像。文件结构是相同的，除了css在css文件夹中，并且图片仍然在图片文件夹中。有任何想法吗？这是它的样子

background:url(pics/alexlogo1.png); 0 0 no-repeat;

我也试过

background:url(/pics/alexlogo1.png); 0 0 no-repeat;

和

background:url(.../pics/alexlogo1.png); 0 0 no-repeat;

但是在外部css文件中我似乎无法使它工作，但在head标签中它可以正常工作。

非常感谢提前

Answer 1

当您在CSS文件中使用该样式时，该URL相对于CSS文件而不是使用它的页面。

您应该使用两个句点来降低关卡，而不是三个：

background:url(../pics/alexlogo1.png) 0 0 no-repeat;

（另外，当你有更多背景设置时，url()后面没有分号。）

---

其他人建议在URL周围添加引号，但这对于URL来说不是必需的。引号（或撇号）根据the specification是可选的，仅当URL包含特殊字符时才需要，否则会破坏CSS语法。

Answer 2

尝试使用引号围绕您的路径，如下所示：

background:url("/pics/alexlogo1.png") 0 0 no-repeat;

请注意，这将导航到文件夹pics，此文件夹与css文件位于同一目录中。这意味着您需要这样做：

background:url("../pics/alexlogo1.png") 0 0 no-repeat;

要将css folder与..一起离开，请使用pics输入/pics文件夹。

示例： C：\ css \ style.css和C：\ pics \ alexlogo1.png

C:\css\style.css
   .. -> C:\
   /pics -> C:\pics` 
   /alexlogo1.png -> C:\pics\alexlogo1.png

Answer 3

background:url("../pics/alexlogo1.png") 0 0 no-repeat;

仅对相对网址使用..（两个句点）。

Answer 4

嘿，你有语法错误!!

在;

之后移除)

background:url(.../pics/alexlogo1.png); 0 0 no-repeat;

它看起来应该是这样的

background:url(.../pics/alexlogo1.png) 0 0 no-repeat;