css - 将 css 文件移动到不同的文件夹时，我丢失了 UL 背景图像？

Question

抱歉，我是 CSS 新手。我正在做一个学校单位，我必须在其中使用基于图像设计的 CSS 创建网页。无论如何，我终于完成了，一切都很好。虽然我发现作为我的单元的要求，我需要将我的 CSS 文件放在一个名为“样式”的文件夹中。所以我创建了一个名为“styles”的新文件夹，我将我的 site.CSS 文件放在那里然后更新了我的 css 链接:

 <link href="site.css" rel="stylesheet" type="text/css"> 

到

<link href="styles/site.css" rel="stylesheet" type="text/css">以满足新的文件路径。

当我打开网页时，除了我的无序列表背景图像不显示外，其他一切都保持不变？在 CSS 文件中设置样式的所有其他内容都工作正常，只是我的 UL 的背景图像消失了。但是当我将 CSS 文件放回原来的位置(与我的 Index.html 文件相同的路径)并将路径更改回它时，一切都再次正常工作并且背景图像重新出现。

我做错了什么？我只是不知道该怎么做。

特定样式的 css 代码:

#menu a {
 height: 30px; 
 display: block;
 vertical-align: middle;
 text-decoration: none;
 color: black;
 font-size: small;
 padding-top: 8px;
 margin-left: 10px;
 margin-right: 10px;
 background-image: url('images/pg_menu_bg.png');
}

感谢您的帮助，我希望这不是一个愚蠢的问题!

Answer 1

这是因为您更改了元素的目录结构。

当你在 css 中引用一个开头没有斜杠的文件路径时，浏览器会假定你引用的是相对于 CSS 文件所在的位置，因此当你将 CSS 文件放在 styles 目录中时，它正在寻找图像:

/styles/images/pg_menu_bg.png

图像实际存在的位置:

/images/pg_menu_bg.png

这就是当您将 css 文件放回根目录时它起作用的原因(我希望这是有意义的？)

你应该能够通过将你的背景 css 更改为来解决这个问题:

背景图片:url('../images/pg_menu_bg.png');

../ 本质上意味着从 css 文件所在的目录上升到一个目录。

如果这样写会更好:

背景图片:url('/images/pg_menu_bg.png');

开头的斜杠告诉浏览器在根目录中查找，这意味着无论您的 css 文件位于何处，代码都应该有效。不幸的是，如果您正在访问计算机上的 html 文件，这将不起作用(因为您计算机的根目录是 C:/)