Изображение спрайтов не отображается

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

Тестирование страницы, я ничего не получаю больше, чем с измененным размером прозрачного изображения. Отображаемое изображение не отображается.

EDIT: Решенный. Я был идиотом и забыл поднять один каталог в моем 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.

Путь будет таким же, как в вашем файле CSS, независимо от того, какой файл index.html вы бы указали в приведенном выше примере.

Answer 2

Попробуйте использовать элемент, отличный от <img>. A <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. Вам также не нужно указывать HTML в своем CSS, как вы установили класс. Попробуйте ...

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

Также у вашего изображения отсутствует кавычки.

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