CSS sprite - изображение не отображается

Question

CSS sprite - изображение не отображается

0

Я просто пытаюсь научиться использовать спрайты. У меня был следующий код:

<div class="jumbotron">
<h1>&nbsp;</h1>
<h1>&nbsp;</h1>
<h1>&nbsp;</h1>
</div>

со следующим css:

.jumbotron {
  background: url("../img/lsm1280.jpg");
  padding: 1em;
  height: 12.5em;
  width: 42em;
  margin-top: 2em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

Я пытаюсь использовать css спрайты. Поэтому я создал файл png, используя: http://spritegen.website-performance.org/

И я изменил код css, чтобы выглядеть так:

.jumbotron {
  background: url("../img/csg-5267d2af270ac.png") no-repeat top left;
  padding: 1em;

  height: 12.5em;
  width: 42em;
  margin-top: 2em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

И я пытаюсь изменить код HTML так:

       <head> .... stuff
       <style>
          .sprite-lsm1280{ background-position: -7036px -1625px; width: 780px; height: 248px; } "
       </style>
      </head>
          <div class="jumbotron">
            <img class="sprite-lsm1280"/>
          </div>

Я просматривал комментарии в следующем сообщении: Не могу заставить CSS Sprite работать... что я делаю неправильно?

Я просматриваю каждый ответ, чтобы увидеть, что я делаю неправильно... но еще не нашел его. Мы ценим любые предложения.

Благодарю.

ИЗМЕНИТЬ 1

Я играю с инструментами разработчика в своем браузере, и теперь вижу, что изображение загружается, но это неправильно! Я изменяю размер свойства высоты/ширины контейнера и как я определил, что изображение загружается... но просто не правильно.

Когда я использовал онлайн-инструмент для создания css-спрайта, он создал для меня кучу классов, в том числе один из них:

  .sprite-lsm1280{ background-position: -7036px -1625px; width: 780px; height: 248px; }

Это css, который я пытаюсь использовать в теге изображений. Но похоже, что фоновая позиция неверна... Я не уверен, как исправить этот/тест, чтобы доказать, что это случай... Спасибо.

dot 23 окт. 2013, в 16:57

Источник

2

в чем конкретно проблема?
jbenjohnson 23 окт. 2013, в 14:34
1

@jbenjohnson Я думаю, он не может заставить работать css-спрайты.
MahanGM 23 окт. 2013, в 14:42
0

Сначала попробуйте дистанционный фоновый повтор - на случай неправильной позиции. Это может дать вам подсказку о правильной загрузке самого изображения.
adrenalin 23 окт. 2013, в 14:53
0

адреналин, я попробовал это ... все еще не работает. Основываясь на ответах, найденных в другом посте, я удостоверился, что у меня есть высота, ширина разделена .. и я попытался удалить повторный верхний левый параметр.
dot 23 окт. 2013, в 15:03
0

Пожалуйста, смотрите мой "РЕДАКТИРОВАТЬ 1" для получения дополнительной информации
dot 23 окт. 2013, в 15:12

Показать ещё 3 комментария

Теги:

html

css

1 ответ

Ещё вопросы

@jbenjohnson Я думаю, он не может заставить работать css-спрайты.
Сначала попробуйте дистанционный фоновый повтор - на случай неправильной позиции. Это может дать вам подсказку о правильной загрузке самого изображения.
адреналин, я попробовал это ... все еще не работает. Основываясь на ответах, найденных в другом посте, я удостоверился, что у меня есть высота, ширина разделена .. и я попытался удалить повторный верхний левый параметр.
Пожалуйста, смотрите мой "РЕДАКТИРОВАТЬ 1" для получения дополнительной информации

DaniP · Accepted Answer · 2013-10-23T12-26-00.000Z

Согласно вашему правлению вы делаете ошибку.

Не используйте класс .sprite-lsm1280 для img. Примените это рядом с классом вашего div, это должно быть так

<div class="jumbotron sprite-lsm1280">

</div>

Поскольку класс .sprite-lsm1280 перемещает ваш фон в определенную позицию.