图像精灵未显示

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"

- Hiigaran

---

你的第一个问题是试图使用w3schools作为资源。你能给出该网站的链接吗？图片路径可能是错误的。 - Cody Guldner

希望我能对那个诋毁w3schools网站的评论进行负面评价。那里有很多有用的东西，组织得很好，而且是免费的。 - Gus

如果你正在遵循w3schools，那么可能是因为他们的原因而出现了问题- http://www.w3fools.com/ - Jawad

@Gus：如果你认为w3school很有用，那么你就错过了很多！ - Jawad

所有的MDN，我很少遇到问题，只有在我无法回忆起琐碎的东西时才会使用w3schools。它们通常是谷歌搜索结果中排名靠前的网站。只遇到过一两个错误。我想如果你从头开始学习，你可能更容易发现他们的所有错误。无论如何，这可能应该是聊天内容。你的经验可能会有所不同。 - Gus

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

- hungerstar

---

哎呀，我真是个傻瓜。是的，我忽略了需要向上一级目录的事实。非常感谢！ - Hiigaran

你不是白痴，伙计。这只是学习曲线而已。点赞该回答。 - Jawad

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;
}

- fauverism

---

OP的语法没有问题。这并不会真正改变任何事情。 - Cody Guldner

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; 
 } 

- html5understudy