Как сделать размер фона css линейным?

Итак, когда я масштабирую фоновое изображение в CSS3, используя свойство background-size, вот так:

.one {
    background-image: url(sprites/1.png);
    background-size: 100% 100%;
}

затем масштабирует изображение: Вот так

Как сделать так, чтобы картинка не была такой размытой? Возможно ли это без изображения с более высоким разрешением?


css background background-image
person PitaJ    schedule 26.02.2014    source источник
comment
Да, вам нужно изображение с более высоким разрешением.   -  person Kevin Jantzer    schedule 26.02.2014
comment
Я не уверен, что понял суть. Вы хотите увеличить изображение выше его разрешения?   -  person matewka    schedule 26.02.2014
comment
СВГ ФТВ! (да, у вас закончилось разрешение)   -  person bjb568    schedule 26.02.2014
comment
возможный дубликат Как растянуть изображения без сглаживания   -  person bjb568    schedule 26.02.2014

Ответы (2)


arrow_upward
1
arrow_downward

Если все фоновое изображение представляет собой просто черную линию, как показано, перед сохранением изображения измените его на индексированное изображение (вместо RGB) и задайте ему индекс только из двух цветов. Таким образом, не будет размытия (сглаживания) и он будет отлично масштабироваться. Это также сделает ваше фоновое изображение очень маленьким размером файла, что способствует быстрой загрузке. Сохраните проиндексированное изображение в формате png или gif.

person jodamo5    schedule 26.02.2014
comment
Не знаю, работает это на самом деле или нет, но это хорошая идея! - person Timothy Miller; 23.03.2015

arrow_upward
0
arrow_downward

В качестве альтернативы вы можете использовать тип изображения, такой как SVG, который обрабатывает операции масштабирования.

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Хотя спецификация SVG в первую очередь ориентирована на язык разметки векторной графики, ее дизайн включает в себя основные возможности языка описания страниц, такого как Adobe PDF. Он содержит положения для богатой графики и совместим с CSS для целей стиля. SVG содержит информацию, необходимую для размещения каждого глифа и изображения в выбранном месте на печатной странице.

person DavidG    schedule 21.03.2016