CSS спрайтове с висока разделителна способност

Генерирам CSS спрайтове. Искам да използвам тези спрайтове в различни размери. Търсих, но не можах да разбера как функционално да мащабирам CSS спрайт - напр. ако оригиналният спрайт е 150x150 и искам да го покажа 50x50, как мога да направя това? background-size изглежда го нарушава.

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

Тъй като не мога да разбера как да мащабирам CSS спрайт, малко съм блокиран - как мога да постигна произволна резолюция с помощта на CSS спрайт?


image html css image-processing css-sprites
person aresnick    schedule 20.01.2012    source източник
comment
Мисля, че това има повече общо с качеството на преоразмеряването на ImageMagick, отколкото с CSS.   -  person Diodeus - James MacFarlane    schedule 21.01.2012
comment
@Diodeus Не е честно да обвиняваме ImageMagick. Освен ако не използвате векторна графика, няма да можете да получите перфектно качество на произволна разделителна способност от който и да е софтуер.   -  person koan    schedule 21.01.2012
comment
Обикновено започвате с по-висока разделителна способност, след което правите версии с по-ниска разделителна способност от нея. Ако IM не може да направи това добре, тогава това е глупост.   -  person Diodeus - James MacFarlane    schedule 21.01.2012
comment
Ако имате изображение 50x50 и след това го преоразмерите до 48x48, нещо ще трябва да дадете някъде. Какъв софтуер използвате?   -  person koan    schedule 21.01.2012
comment
Използвам ImageMagick и изглежда, че resample трябва да може да прави това, което искам, но не успях да разбера как да работя с него. Като се има предвид, че имам голямо изображение, получаването на по-малко, с по-висока разделителна способност изглежда, че би трябвало да е възможно. Но не ми е ясно как.   -  person aresnick    schedule 21.01.2012

Отговори (3)


arrow_upward
3
arrow_downward

Най-елегантният начин, по който можете да направите това, е като използвате CSS3 background-size, но това не се поддържа от всички браузъри (напр. IE‹=8). Може да разгледате специфични за IE трансформации или филтри, които можете да използвате, и след това да добавите селекторите -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/

person Brett Pontarelli    schedule 20.01.2012

arrow_upward
0
arrow_downward

Не знам как да променя размера на CSS спрайт, съжалявам.

Що се отнася до генерирането на CSS спрайтове, опитайте: http://spriteme.org/

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

Можете да редактирате отделните компоненти на изображението и след това да използвате SpriteMe, за да генерирате Sprite. Не искате да генерирате спрайта и след това да преоразмерите цялото изображение на Sprite, тъй като тогава вашите CSS позиции за всеки отделен елемент ще бъдат изхвърлени.

person Chad Schultz    schedule 20.01.2012

arrow_upward
0
arrow_downward

Опциите, които виждам са:

  1. Или имайте съдържанието на спрайта в различни размери в един спрайт.

  2. Или вземете оригиналния спрайт и го преоразмерете ръчно веднъж, за да създадете негово по-малко копие. След това направете справка с по-малката версия на спрайта, когато имате нужда от по-малки изображения.

person NightHawk    schedule 20.01.2012