Как можно изменить размер части CSS-спрайта?

Question

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

Для этого мне бы хотелось, чтобы все изображения были в 1 файле png, css sprite.

Моя проблема заключается в том, что для поддержки диалогового окна, которое позволяет развернуть до 2 или 3 мониторов, я думаю, что мне нужно было бы поместить графику с широкой / высокой границей 5000 пикселей в файл спрайта css. Потому что я не могу найти способ изменить размер выбранной части изображения спрайта CSS.

В основном я хочу изменить размер изображения спрайта в области (t, l, w, h) в DIV или IMG на моей странице с другой шириной и высотой. Я хотел бы знать, это вообще возможно? Кажется, background-position вообще не поддерживает это.

Я попробовал первое решение в Как я могу масштабировать изображение в спрайте CSS , но не смог заставить его работать с этим.

Я пытался использовать новое свойство background-size в сочетании с background-position, но это также не дает желаемых результатов.

Answer 1

Потратил еще несколько часов, вертя с css, но не смог заставить спрайты работать для диалогов.

Но моим анимированным диалоговым окнам не нужно много кадров (если только вы не хотите поместить реальное видео в качестве фона диалога в Интернете), поэтому для темы диалога, которую я сейчас разрабатываю, у меня есть 8 312x312 png в качестве кадров, 8 запросов Всего 386kb. Как раз достаточно, чтобы создать светящуюся анимацию, когда диалог находится в «выделенном» состоянии. Это выполнимо.

Я использую технику из Как масштабировать изображение в спрайте CSS

См. http://mediabeez.ws примерно через месяц о выпуске анимированных диалогов с открытым исходным кодом. Я буду разрабатывать и тестировать этот автономный компонент, когда он будет использоваться моей собственной доморощенной CMS, так что он будет иметь возможность быть тематическим, перетаскиваемым и пр., И тому подобное.