Моё фоновое изображение имеет маленькое разрешение и браузер его размывает. Мне нужно наоборот сделать границы пикселей резкими.
1 ответ
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">
-
-
-
-
Проверил Edge, Safari (desktop, Mac), Chrome (PC, Mac), Opera вроде работает, есть проблемы контролировать пиксельность и размер пикселя (чем больше пикселей тем хуже результат)– Greg--Commented 9 июл. 2021 в 13:53
-
image-rendering: pixelated;
могут конечно вылазить баги на границахimage-rendering: crisp-edges
конечно у pixelated поддержка браузерами скудная