Как сделать Sprites Larger

Мне нужно увеличить размер некоторых спрайтов в нижнем колонтитуле WordPress, и я не могу понять, как это сделать.Как сделать Sprites Larger

Я попробовал настроить background-size, так как рекомендуется несколько потоков, но не имел никаких результатов, о которых стоит упомянуть.
Я использовал transform: scale(2), который работал, но это выглядело ужасно. (Хуже, чем нормальный пикселизация)

HTML:

<div> 
    <div class="sprites sprite1"></div> 
    <div class="sprites sprite2"></div> 
    <div class="sprites sprite3"></div> 
</div>

CSS:

.sprites { 
    background-image: url('http://static.tumblr.com/6az34or/hTwmc1qw7/socialmedia-sprites.png'); 
} 
.sprite1 { 
    background-position: 0px 0px; 
    height: 25px; 
    width: 25px; 
} 

<!-- etc. -->

jsFiddle: http://jsfiddle.net/Labb6da9/

источник

2015-09-10 CSS Apprentice

Вы не можете увеличить размер .png, без потери качества, а также сопутствующие побочные эффекты (размытие, искажение). Используйте большие изображения, или svg ... – sinisake

@nevermind Обратите внимание, что для некоторых устройств SVG может быть слишком требовательным к ресурсам. –

@Derek 朕會功夫, спасибо ... Тогда, я думаю, единственный способ - использовать спрайт с нужными размерами. Полезная ссылка: http://vector-conversions.com/vectorizing/raster_vs_vector.html – sinisake

.png спрайты работают, потому что вы используете пиксели, чтобы заглянуть в ограниченную область большего изображения. Это означает, что вы не можете легко их масштабировать. Вы не можете делать ничего, что влияет на координаты, которые выбирают изображение спрайта, не подвергая другие изображения спрайтов, если вы не увеличите размер основного изображения соответственно. Затем вам нужно сделать это с точностью до нескольких пикселей (так точнее 2x или 3x), чтобы избежать кровотечения - это может не соответствовать вашим проектам.

При любом увеличении качества изображения на пикселях будет потеряно.

падение пикселей, чтобы выиграть ...

SVGs будет масштабироваться без потери качества. Вы также можете sprite them. Они работают, определяя изображение как набор координат, которые определяют линии, а не цвета набора атомных блоков, расположенных в сетке. Координаты можно легко масштабировать. Кроме того, они определены как HTML, то есть они могут быть targeted with css и embedded directly in the document. Все это дает большую гибкость, позволяя масштабировать и удерживать HTTP-запросы (исходная цель написания)

Icon fonts позволит вам обрабатывать набор значков, таких как шрифт, предоставляя вам такую гибкость, d ожидайте от шрифта, такого как цвет и размер. Кроме того, с помощью шрифта вы получаете одно из преимуществ HTTP-справки спрайта.

IcoMoon will produce both for you

источник

2015-09-10 19:01:46

Как сделать Sprites Larger

ответ

Смежные вопросы