Отключить антиализацию при масштабировании изображений

Возможный дубликат:
   Как растягивать изображения без сглаживания

Можно ли отключить сглаживание при масштабировании изображения?

Прямо сейчас, я получаю что-то похожее на это:

What i get

Используя следующий код css:

#bib { width:104px;height:104px;background-image:url(/media/buttonart_back.png);background-size:1132px 1360px;
background-repeat:no-repeat;}

Что бы я хотел, это примерно так:

What i seek

Короче говоря, любой флаг CSS для отключить сглаживание при масштабировании изображений, сохраняя жесткие края.

Любые javascript-хаки или подобные приветствуются.

(Да, я знаю, что PHP и imagemagick тоже могут это сделать, но предпочли бы решение на основе css).

UPDATE The following have been suggested :

image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

Но это не работает на фоне изображений.

46
nl ja de

2 ответы

Попробуй это, это исправление для его удаления во всех браузерах.

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}

Источники:

http: //nullsleep.tumblr .com/пост/16417178705/как к отключить образом сглаживания-в-современные веб-браузеры

http://updates.html5rocks.com/2015/01/pixelated

GitaarLAB

95
добавлено
К сожалению, это не работает в Chrome.
добавлено автор Ruud Lenders, источник
+1 Kasper Себастьян Брандт Дженсен Можете ли вы написать номера версий в комментариях? Как это было пять лет, и, возможно, некоторые из них могут быть удалены или изменены в то же время?
добавлено автор Sam, источник
@ Каспер Себастьян Брандт Дженсен, похоже, что это не работает в Microsoft Edge, когда вещи масштабируются с использованием свойства CSS transform: scale (2) ...
добавлено автор Sam, источник
@lanewinfield Повторяется ли фон? Может быть bugs.webkit.org/show_bug.cgi?id=177037 .
добавлено автор mjs, источник
Взрыв из passsss .... uh future :) : вы можете добавить текущий список стандартов CSS3 в список: image-rendering: pixelated , см .: updates.html5rocks.com/2015/01/pixelated
добавлено автор GitaarLAB, источник
Ни в Opera> = 15
добавлено автор volter9, источник
Я вижу, что это работает в Chrome версии 40.0.2214.115 (64-разрядная версия) на моем iMac
добавлено автор SlickRemix, источник
работая для меня на Chrome 65 для элемента . Благодаря!
добавлено автор robert, источник
Это не работает с фоновыми изображениями в WebKit. Не могу сказать, является ли это ошибкой или нет.
добавлено автор lanewinfield, источник

CSS, который работает в Только Firefox :

img { image-rendering: -moz-crisp-edges; } 

It worked for me (firefox 16.0) enter image description here

7
добавлено
нет. по крайней мере мне неизвестно ... :)
добавлено автор Champ, источник
Спасибо чувак. У меня нет проблем с нисходящими голосами, но, по крайней мере, я знаю, почему?
добавлено автор Champ, источник
downvoter, пожалуйста, прокомментируйте ..
добавлено автор Champ, источник
человек, я уже сказал, что он работает только для firefox. Пожалуйста, прочитайте ответ, прежде чем проголосовать
добавлено автор Champ, источник
работал на меня. какая версия?
добавлено автор Champ, источник
Извините, вы были правы, у меня хром и firefox запутались (и не спустили вниз вас кстати).
добавлено автор Nils Munch, источник
да, я перепутал в своем ответе, не по вине Champ здесь.
добавлено автор Nils Munch, источник
Мех, собираюсь подняться, просто восстановить равновесие :)
добавлено автор Nils Munch, источник
Ницца. Но я предполагаю, что другие браузеры не имеют аналогичного ключа?
добавлено автор Nils Munch, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)