html - 图片精灵不显示

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”

score 5 · Accepted Answer

您确定图像文件夹的路径正确吗？确保你的 sprite 的路径是相对于你的 CSS 文件的，而不是来自链接 CSS 文件的位置。

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

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

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

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

score 3 · Accepted Answer

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

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

和CSS：

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

score 3 · Accepted Answer

首先，看起来好像您使用的是精灵<img>不是正确的标签。一个 div 在这里就足够了。你也不需要在你的 CSS 中定位 HTML，因为你已经设置了一个类。尝试...

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

您的图片网址也缺少引号。

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

3 回答 3