4

Моё фоновое изображение имеет маленькое разрешение и браузер его размывает. Мне нужно наоборот сделать границы пикселей резкими.

6
  • @Greg-- а просто отменить размытие нельзя? Я просто хочу пиксельный фон. 9 июл 2021 в 13:19
  • 1
    Попробуйте задать для изобрадения image-rendering: pixelated; могут конечно вылазить баги на границах
    – Greg--
    9 июл 2021 в 13:28
  • Может лучше будет image-rendering: crisp-edges конечно у pixelated поддержка браузерами скудная
    – Greg--
    9 июл 2021 в 13:32
  • Одна из методик - фильтр в канвасе сделать, проще - фильтр в svg тогда получится контролируемый результат
    – Greg--
    9 июл 2021 в 13:35
  • Можно скриптами Pixel IT
    – Greg--
    9 июл 2021 в 13:36

1 ответ 1

4

img {
  width: 180px;
  margin: 10px;
}

img + img {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
<img src="//i.stack.imgur.com/GMjDY.png">
<img src="//i.stack.imgur.com/GMjDY.png">

10
  • не вижу разницы в фаирфоксе
    – teran
    9 июл 2021 в 13:45
  • @teran, кажется, только для хрома... Сейчас потыкаю FF.
    – Qwertiy
    9 июл 2021 в 13:46
  • @teran, готово, теперь и в FF работает.
    – Qwertiy
    9 июл 2021 в 13:49
  • Проверил Edge, Safari (desktop, Mac), Chrome (PC, Mac), Opera вроде работает, есть проблемы контролировать пиксельность и размер пикселя (чем больше пикселей тем хуже результат)
    – Greg--
    9 июл 2021 в 13:53
  • @Greg--, не понял про пиксели.
    – Qwertiy
    9 июл 2021 в 13:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.