Расположение фонового изображения

Question

Я создал спрайт, который включает в себя целый набор иконок, которые я использую в своем веб-приложении.Тем не менее, я столкнулся с проблемой при оформлении ссылок.Я знаю, что с помощью CSS я могу манипулировать размером ссылки и перемещать ее фоновое изображение (спрайт), поэтому я показываю только нужный мне значок внутри спрайта.Это прекрасно работает для ссылок без текста.Однако, если у меня есть ссылка с фоновым изображением и дополнительным текстом, вот где я сталкиваюсь с проблемами.

Посмотрите на эти изображения, которые объяснят мою дилемму:

• Значок спрайта: https://picasaweb.google.com/lh/photo/vN74tYI2lsdjOCpvdLjdPBV2JJooBc4dMF1MOKsl3b4?feat=directlink
• Дилемма: https://picasaweb.google.com/lh/photo/UkC1dP7Fzxv02f_xjX-AEBV2JJooBc4dMF1MOKsl3b4?feat=directlink

Я знаю, что могу "обрезать" фоновое изображение в CSS3, но я пытаюсь избежать этого на данном этапепотому что я знаю, что в основном к браузеру будут обращаться в основном старые браузеры [например, IE8 X (], и не увидят этого изменения. Есть ли способ сделать это без размещения дополнительного тега, такого как тег <span> внутри каждогосвязать и стилизовать их? Я видел примеры, где я могу использовать AJAX-библиотеку, например, jQuery, чтобы помочь с этим, но это большое удовольствие для небольшой задачи.

Надеюсь, это не смутило.

Answer 1

С jQuery это довольно просто: просто назначьте всем таким элементам общий класс, как sprite.Теперь вы можете проверить, является ли это IE8, и запустить этот код:

$('.sprite').toggleClass('sprite').prepend('<span class="sprite"/>')

, который создает span с классом sprite.С помощью некоторого умного CSS вы сможете перемещать фон к элементу с помощью класса sprite.

Answer 2

Вам нужно поместить пустое место в ваш спрайт, где вам нужно. Это должно делать свое дело. Вот так>> 1001 *http://css -tricks.com / wp-content / csstricks-uploads / youtube-sprite.png