图像精灵没有显示

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文件中的路径都是相同的。

Answer 2

尝试使用<img>以外的元素。 <div>元素应该可以正常工作。

<div class="index1" alt="alt" title="title" ></div>

CSS：

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

Answer 3

首先，看到你正在使用精灵<img>并不是正确的标签。一个div就足够了。在设置类时，您也不需要在CSS中定位HTML。尝试...

<div class="index1"></div>

此外，您的图片网址缺少引号。

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