Как сделать картинку белой css

Фильтры для изображений с CSS Filter Effects

В графических редакторах очень легко менять яркость или контраст изображений, применять различные фильтры. С недавних пор это можно делать и средствами CSS прямо на веб-страницах с помощью CSS Filter Effects.

Поддержка браузерами

Как обычно, браузеры, поддерживающие данный параметр, можно посмотреть на caniuse.com:

Эффекты

Применение эффектов очень простое, например, такая конструкция применяется для перевода цветного изображения в черно-белое:

Сепия, аля Инстаграм:

В обоих эффектах можно устанавливать уровень эффекта от 0 до 100%.

brightness может принимать отрицательные значения, изображение будет затемняться:

При 100% эффекта contrast изображение не меняется, поэтому можно установить 200%:

Эффекты можно комбинировать:

Так можно получить красивый hover-эффект:

В спецификации подробно описаны остальные эффекты, такие как hue-rotate, invert и saturate. Но они гораздо менее применимы на живых проектах.

С помощью css перекрасить png в белый

Есть логотипы в png и все они разных цветов. Возможно ли с помощью css их делать белыми? (как в ФШ наложение overlay) Или может быть есть какие-то приёмы вёрстки?

Пробуйте поиграть с filter: invert и filter: grayscale . А вообще, учитывая, что люди все чаще просматривают сайты на ретина-дисплеях, логотипы лучше делать в svg, с этим форматом гораздо проще работать в css. А еще лучше — переводить логотипы вместе с иконками в иконочный шрифт, тогда с цветом и прочими параметрами вообще проблем не будет.

2.27. CSS3-фильтры

CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.

Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.

Изначально фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.

Браузеры обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.

Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент :hover .

Поддержка браузерами

IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *