Как я могу изменить размер и увеличить изображение (например, иконки спрайтов) с помощью CSS 3? - PullRequest
Новая
       21

Как я могу изменить размер и увеличить изображение (например, иконки спрайтов) с помощью CSS 3?

3 голосов
/ 25 февраля 2011

Дорогие люди.Представьте себе спрайт-изображение с именем icons.png, назначенное классу css .icons с различными графиками 10x10 пикселей.Теперь вам нужен другой класс, который увеличивает спрайт-графику ровно в два раза на 200% (делая их на экране 20х20 пикселей)

Как мне добиться этого увеличения чисто в CSS?
Очень ценится! 

.icons, .iconsbig{    /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}

.iconsbig{    /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
    image-rendering:-moz-crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;
}

обновление:

проблемы с кодом выше:

  • Работает в IE9, но не в FireFox,наиболее используемый браузер не знает, как изменить размер ????
  • в IE9, увеличение нечеткое и совсем не идеальное, соседский пиксель идеален ??

Ответы [ 2 ]

4 голосов
/ 25 февраля 2011

поддерживается практически во всем, кроме 

.iconsbig {  
    -moz-background-size: 20px;
    background-size: 20px;
    image-rendering:-moz-crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;
}

W3C spec .

Обновление

Похоже, Firefox хочет, чтобы его префикс поставщика (-moz) был указан в свойстве.

2 голосов
/ 25 февраля 2011

Вы можете использовать свойство css3 background-size: 

.iconsbig {
  background-image:url(http://site.org/icons.png);
  background-size: 20px 20px;
}
...