CSS-спрайты высокого разрешения - PullRequest
Новая
       7

CSS-спрайты высокого разрешения

4 голосов
/ 20 января 2012

Я генерирую спрайты CSS. Я хочу использовать эти спрайты в нескольких размерах. Я искал, но не смог выяснить, как функционально масштабировать спрайт CSS - например, если исходный спрайт имеет разрешение 150x150, и я хочу отобразить его со значением 50x50, как я могу это сделать? background-size, кажется, сломал его.

Я могу просто генерировать спрайты в нужных размерах, но когда я делаю это через -resize ImageMagick, я получаю заметное разрешение разрешения. Обычно, если я нахожу изображение с недопустимо низким разрешением на веб-странице, я просто делаю изображение большего размера и масштабирую его размер, функционально увеличивая разрешение изображения.

Поскольку я не могу понять, как масштабировать спрайт CSS, я немного застрял - как я могу добиться произвольного разрешения с помощью спрайта CSS?

Ответы [ 3 ]

3 голосов
/ 21 января 2012

Самый элегантный способ сделать это - использовать CSS3 background-size, но это поддерживается не во всех браузерах (например, IE <= 8).Вы можете изучить специальные преобразования или фильтры IE, которые вы можете использовать, а затем добавить селекторы <code>-mz-, -webkit- и -o-, чтобы получить желаемый эффект для целевых браузеров.

наименее элегантный способ сделать это - подделать шкалу спрайтов и позиционирование.

HTML 

<div class="ex3">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

CSS 

.ex3 {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;  
}
.ex3 img {
    position: absolute;
    top: -25px;
    left: -25px; 
    width: 150px;  /* Scaled down from 600px */
    height: 100px;  /* Scaled down from 400px */
}

Скрипка

http://jsfiddle.net/brettwp/s2dfT/

0 голосов
/ 21 января 2012

Варианты, которые я вижу:

  1. Либо содержимое спрайта может иметь разные размеры в одном спрайте.

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

0 голосов
/ 21 января 2012

Я не знаю, как изменить размер CSS-спрайта, извините.

Что касается генерации CSS-спрайтов, попробуйте: http://spriteme.org/

Или для общего редактирования изображений: http://www.gimp.org/

Вы можете редактировать отдельные компоненты изображения, а затем использовать SpriteMe для генерации Sprite. Вы не хотите генерировать спрайт и затем изменять размер всего изображения Sprite, так как тогда ваши CSS-позиции для каждого отдельного элемента будут сброшены.

...