Question

我为我的网站创建了一个照片库，在我最新的网站上，我认为我将CSS和所有页面文件都包含在名为“gallery”的子文件夹中，认为这样会更容易，因为我可以像使用它一样其他网站上的插件。

以下是图库页面：http://unserclosecustoms.com/gallery/galleries.php

新问题与我在photo.php页面上用于导航图形的图像精灵有关。这是您一次滚动一个大尺寸图像的页面。

以下是照片页面的示例链接：http://unserclosecustoms.com/gallery/photo.php?curPage=12&g=33&t=19

精灵文件gallerylinks.png位于一个名为“graphics”的文件夹中，该文件夹是该站点的根目录。我决定更改精灵文件的位置，并将其放在名为“graphics”的文件夹中的“gallery”文件夹中。我更改了我的CSS文件中的background路径，当我去尝试它时......没有图片精灵。我在信件中检查了十几次的拼写，但仍然没有运气。

当我将CSS文件中的路径更改回根目录中的“graphics”文件夹时，它可以正常工作。我不知道为什么更改精灵文件的位置（以及CSS中适当的background路径）会有所不同。我在Firefox 17（我的主浏览器）和Chrome 23中检查了这个，结果相同，所以我认为这不是浏览器问题。

我可以使用它当前位置的精灵文件，但我宁愿把它放在'gallery'文件夹里面的'graphics'文件夹中。任何和所有帮助将不胜感激。

Answer 1

我同意上面的使用虚拟路径而不是相对路径。你会以这种方式消除很多麻烦。

如果没有看到其中的页面处于非工作状态，则很难对此进行故障排除。然而，我最好的猜测是它可能与移动文件和移动图像有关，并且你的相对路径被剔除了。

我是否正确阅读了以上内容，您是否正在尝试将您的页面放在/gallery/photo.php和/gallery/graphics/gallerylinks.png上？如果是这种情况，相对于页面，正确的rel路径将是../ graphics / gallerylinks.png。

然而，再次，保存所有这些不必要的头痛并遵循使用虚拟路径的建议 - 然后当你决定移动页面时，生活仍然很好，因为你总是从根开始。

Answer 2

看看你是否可以避开相对于CSS文件所在位置的路径：

#back a:hover {
   background: url(../../graphics/gallerylinks.png) -160px -30px;
}

而是使用带有前导/的根路径（移动文件后）：

#back a:hover {
   background: url(/gallery/graphics/gallerylinks.png) -160px -30px;
}

没有为图像精灵加载背景文件

2 个答案: