При загрузке страницы на сервер не отображается элемент (png)

266
19 февраля 2017, 10:33

Приветствую! Дело в том, что в live preview, или если просто забросить html в браузер, все отображается нормально, но вот я загрузил страницу на сервер и один элемент почему-то не отображается... Я совсем недавно изучаю фронтэнд и это мои первые шага, так что не судите строго)

не отображаемый элемент находится в этом блоке:

[class^=stil_]{ display:block; box-sizing:border-box; background:rgba(160,170,180,1.00); padding:9px 12px; max-width:936px; height:47px; cursor:pointer; margin:2px auto 0px auto; position:relative; color:rgba(50,70,90,1.00); }

а вот что именно не отображается:

    [class^=stil_]::after{
        content:""; width:31px; height:24px; background:url(images/strelka.png) no-repeat; float:right; 
    }

Может кто-нибудь подскажет, в чем может быть причина?

Answer 1
  1. Проверьте доступность картинки по ссылке. Советую использовать абсолютный ссылки которые начинаются с /. В браузере откройте панель инструментов разработчика клавишей F12, перейдите на вкладку console и посмотрите нет ли там ошибок 404. Если есть красная строка - значит проблема в пути к файлу.

  2. Проверьте не превышают ли размеры картинки размеры указанные в стили для ::after. Попробуйте добавить background-size: contain, что означает уместить фон в заданном контейнере (читать про background)

READ ALSO
Прозрачное зачеркивание текста

Прозрачное зачеркивание текста

Мне нужно реализовать прозрачное зачеркивание текста с помощью CSS, поэтому не придется заменять тег <H1> на тега <IMG>Мне удалось реализовать...

441
Операторы перегрузки

Операторы перегрузки

Доброго времени суток! Можете понятно объяснить про перегрузку операторов? Нужно создать класс для представления простой дроби, с чем я справилась,...

304
printf как средство печати переменных в С

printf как средство печати переменных в С

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

500