Question

我似乎无法显示图片精灵。有人可以查看代码并告诉我是否正确吗？我检查了代码，似乎无法弄清楚错误。

CSS

#nav-footer 
{ background:url(./_img//Footersprite.png) repeat-y;     
     width: 490px;
    height: 40px;
    margin: 0;
    padding: 0;
}

#nav-footer li, #nav-footer a {
    height: 40px;
    display: block;
}

#nav-footer li {
    float: left;
    list-style: none;
    display: inline;
}

#whyroofrepair a:hover { background:url("/_img/Footersprite.png") 0px -40px no-repeat; }
#savings a:hover { background:url("/_img/Footersprite.png") -98px -40px no-repeat; }
#enviromental a:hover { background:url("/_img/Footersprite.png") -229px -40px no-repeat; }
#advantage a:hover { background:url("/_img/Footersprite.png") -352px -40px no-repeat; }

#whyroofrepair { width: 55px; }
#savings { width: 55px; }
#enviromental { width: 55px; }
#advantage { width: 55px; }

HTML

<ul id="nav-footer">
<li id="whyroofrepair"><a href="/why-roof-repair.html">Why Repair</a></li>
<li id="savings"><a href="/savings.html">Savings</a></li>
<li id="environmental"><a href="/environmental-benefits.html">Environmental Benefits</a></li>
<li id="advantage"><a href="/roof-rx-advantage.html" class="advantage">Roof Rx Advantage</a></li>

块引用

http://jsfiddle.net/LQCm2/2/

我用Js小提琴测试了这个。

有人可以看看吗？

Answer 1

首先，将 ./_ img // Footersprite.png 更改为 ../_ img / Footersprite.png

如果这不能解决问题，请按以下步骤进行：

如果您的 _img 文件夹包含精灵：

住在你的css文件旁边，那么你的图像路径应该是这样的的 _img / foo.jpg

直播在您的css文件的父文件夹之外，然后是您的图片路径应该像 ../_ img / foo.jpg

住在项目的根目录中，然后您的图像路径应该是喜欢 / _ img / foo.jpg

Answer 2

EmileKumfa - 我添加了其他信息。请参阅原帖

图像精灵不会显示

2 个答案: