css-фильтр, чтобы получить синее изображение?

Есть ли способ превратить изображение в «оттенки синего» или «оттенки зеленого» или любой другой цвет? Так же, как фильтр в CSS? Или, может быть, комбинация фильтров?

filter:grayscale(100%);

Спасибо!

Решение найдено, но оно не "удобно для пользователя" для нетехнического специалиста: серое изображение css3 в синий цвет с помощью фильтров?

Я надеюсь на решение, в котором вы можете указать «rgb» для цвета, к которому хотите обратиться.


css css-filters
person Emanuel    schedule 12.09.2018    source источник
comment
Возможный дубликат Какая математика стоит за фильтрами CSS?   -  person Sunny Patel    schedule 12.09.2018
comment
Решение, предложенное в дублирующем вопросе, на который вы ссылаетесь, может быть настолько простым, насколько это возможно (во всяком случае, вам, возможно, придется немного усложнить ситуацию и добавить grayscale, contrast и brightness к фильтрам sepia, hue-rotate и saturate, чтобы действительно получить именно тот оттенок синего, который вам нужен). Если вы прочитаете о том, как работает чередование оттенков<, это может немного прояснить ситуацию. /а>.   -  person benvc    schedule 12.09.2018
comment
Это легко сделать, если вам удобно использовать встроенный SVG и фильтр feColorMatrix.   -  person Michael Mullany    schedule 19.09.2018

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете легко получить этот эффект с помощью режимов наложения.

Установите фоновое изображение нужного цвета перед изображением

И установите режим наложения: цвет;

Поддержка не идеальна, но у фильтров почти такая же проблема

.test {
    width : 200px;
    height: 200px;
    background-image: linear-gradient(blue, blue), url("https://picsum.photos/200/200");
    background-blend-mode: color;
}
<div class="test"></div>

person vals    schedule 12.09.2018
comment
Это было бы идеальным решением, единственная проблема заключается в том, что он не работает на краю caniuse.com/# search=background-blend-mode - person Emanuel; 13.09.2018
comment
использовать фильтр SVG - person Michael Mullany; 11.11.2018