CSS | importing sprites неправильный относительный путь

Я пытаюсь использовать CSS для импорта спрайтов, и я сделал это 100 раз раньше, но в этот раз он, похоже, не работает. Я использую относительные пути, чтобы получить изображение из моего CSS-файла.CSS | importing sprites неправильный относительный путь

Моя структура файла выглядит так:

Root 
| 
| Index.html 
| 
|____Content 
    |____css 
    | main.css 
    | 
    |____images 
    | tips.png

CSS-я использую, чтобы попытаться получить элементы из файла выглядит следующим образом

//tips icons 
.sprite-tips{ 
    background: url("../images/tips.png") no-repeat; 
    width: 25px; 
    height: 25px; 
} 
.tips-tick { 
    background-position: 0 0; 
} 
.tips-cross { 
    background-position: -30px 0; 
}

Это, как я пытаюсь примените его:

<div class="sprite-tips tips-tick"></div>

Этот код копируется из одного из моих других рабочих проектов, и он не работает, любой i ДЕКАК?

источник

2015-09-29 Kieranmv95

Вы уверены, что файл изображения есть и имеет тот же самый путь и имя? Разницы между большими и маленькими буквами? – deem

Да, все написано правильно, и это в проекте :) – Kieranmv95

Попробуйте проверить этот элемент с помощью браузера (например, Chrome) (Inpsect этот элемент или что-то в этом роде). Возможно, он загружается, но находится вдали от div. У вас будет информация об ошибках с загрузкой - просто чтобы быть уверенным. – deem

Я исправил эту проблему, используя следующий фрагмент кода, хотя может кто-то пожалуйста, объясните, почему это зафиксировал его

background: url("/Content/images/tips.png") no-repeat;

источник

2015-09-29 10:29:59 Kieranmv95

Похоже, что исправленная проблема была первой косой чертой ('/') до «Содержание». Я сомневаюсь, что изменение «..» для «Контента» решило его, действительно, добавление новой косой черты в начале показалось решением. Не могли бы вы протестировать его, заменив «Контент» на «...» еще раз, чтобы убедиться, что он работает? –

с '...', где предлагается продолжать его не загружать, так что странно – Kieranmv95

Вау, действительно. Тогда я понятия не имею, что происходит. В любом случае, я рад, что вы решили проблему –

ОБНОВЛЕНО ОТВЕТ

Похоже, все, что устранило проблему (как он назначен по его ответу) добавлял новую косую черту (/) в начале перед ../images. Я сомневаюсь, что изменение «..» для «Контента» решило его, так как добавление новой косой черты в начале показалось решением.

OLD (и неправильно) ОТВЕТ

Я моделируется папки на моем компьютере, и кажется, что проблема может быть с .tip-tick класса. .tips-tick { background-position: 0 0; } При удалении стилей пропавшая строка, отображаемая на консоли разработчика (внутри класса .sprite-tips), исчезает. Другим сложным шагом может быть добавление «важного» заявления, как показано выше: .sprite-tips{ background: url("../images/tips.png") no-repeat !important; width: 25px; height: 25px; } Сообщите мне, если это решит проблему.

источник

2015-09-29 10:30:10

класс подсказок-tick правильный, но теперь мне нужно уточнить, почему мой предыдущий ответ сработал, а не на 100% уверен, я также стараюсь избегать! Важно для синтаксической привлекательности – Kieranmv95

Добавлено комментарий к вашему ответу. –

CSS | importing sprites неправильный относительный путь

ответ

Смежные вопросы