图像精灵没有显示

Question

不知道我在这里做错了什么,但我已经尝试在相关的w3schools页面上关注这个例子,但无济于事.所以这就是我到目前为止所拥有的:

我的索引页面上有四个图像,名为index1.png,index2.png等.我将它们组合成一个png,简单地就是index.png.那是我的精灵形象.我还有一个1x1透明图像,它是HTML中每个图像的占位符.这是图像代码:

<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />

而CSS:

img.index1 {
    width:258px;
    height:300px;
    background:url(Images/index.png) 0px 0px;
}

测试页面,我得到的只是一个调整大小的透明图像.我想要显示的图像没有显示出来.

编辑:解决了.我是个白痴,忘记在我的CSS中找到一个目录,因为我的CSS位于根目录下的一个文件夹中.正确的道路是"../Images"

Answer 1

您确定图像文件夹的路径是否正确？确保您的精灵的路径与CSS文件相关,而不是从链接CSS文件的位置.

如果您有这样的文件夹结构:

/index.html
/css/style.css
/images/sprite.png
/folder1/index.html
/folder2/subfolder2/index.html

在CSS文件中使用的正确路径是:../images/sprite.png.

无论index.html您在上面的示例中包含哪个文件,CSS文件中的路径都是相同的.