4

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

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

1 ответ 1

4

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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