Можно ли изменить, используя методы CSS Filter, такие как HueRotate, Saturation и Brightness, цвет PNG полностью белый? Как эффект наложения цвета Photoshop, но в CSS.CSS Фильтр в качестве цветового модификатора для одного изображения
Это было бы хорошим решением, чтобы избежать создания большого количества изображений, которые меняют только цвет. Например, набор значков, имеющих темные и светлые версии для пользовательского интерфейса.
Вы также можете раскрасить белые изображения, добавив сепию, а затем некоторую насыщенность, оттенок-поворот, например. в CSS:
filter: sepia() saturate(10000%) hue-rotate(30deg)
Это должно сделать белое изображение как зеленый изображение.
Добавлен JSBin, чтобы показать это для каждого значения поворота оттенка. Понятно, что не все цвета могут быть созданы, к сожалению. – mahemoff
добавьте яркость (50%) для перемещения и выключения цветного колеса, и вы должны иметь возможность получить любой цвет. – ewanm89
Это должен быть принятый ответ - теперь, если только кто-то сделает онлайн-инструмент для создания фильтра, необходимого для получения конкретное значение rgb/hsl ... –
Попробуйте сделать brightness более 100%. Вы заметите, что изображение начнет исчезать до белого, когда вы будете двигаться дальше выше 100%. Тьма изображения определит, как далеко от 100%, что вам нужно переместить.
img {
-webkit-filter: brightness(1000%);
}
Помните, что могут видеть только пользователи Google Canary CSS3 фильтры и что CSS3 фильтры не влияют на изображение в любом другом браузере. (по крайней мере, пока).
Это похоже на решение, но если вы хотите работать только с черным и белым цветом, для этого уже существует один фильтр: оттенки серого. Но, если вы хотите покрыть ** все цветовые возможности **, вам нужно выбрать один цвет по умолчанию для значка и манипулировать им с помощью 'hsl filters'. Это то, о чем я говорю, и я просто не знаю, что это такое. –
@MateusDuartePoncedeLeon, так что вы имеете в виду, что вам нужен вариант не только превратить изображение полностью белым, но и красным? Использование белого было, вероятно, плохим примером выбора. – j0sh1e
уверен, что белый был плохим выбором, чтобы продемонстрировать решение, но я этого не заметил, потому что я действительно считал, что белый цвет способен меняться, как я хочу. Спасибо за вашу помощь! –
Это классная идея, но она не будет работать с белым изображением, как вы предлагаете. Вы можете сделать это с помощью цветного изображения, но не, если все белое. Я попробовал следующее в Safari, используя версию webkit фильтра CSS:
<div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>
Но коробка остается белой. Если я переключу цвет на синий следующим образом:
<div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>
Я получаю красную коробку. Это связано с тем, что фильтр работает со значением оттенка, который отсутствует в белом или черном цвете.
Спасибо, человек, это было действительно разъяснительно! Итак, взяв синий в качестве начальной точки (или любого другого цвета, кроме абсолютного черного и белого), я могу получить любой другой цвет? В том числе черный и белый? –
Добро пожаловать. Это было весело. Вы можете повернуть на любой цвет или сделать цвет черным или белым по яркости и оттенкам серого. – bitfiddler
Вот что я говорю! Hahahaha ... Конечно, есть ограничения, чтобы широко использовать эту технику, но когда вы получаете проект с определенной целью, такие вещи действительно помогают нам! –
На самом деле, к счастью, есть способ!
Основная трудность здесь, как упоминалось ранее, заключается в том, что в изображении оттенков серого не существует цвета. К счастью, есть фильтр, который может накачать в каком-то цвете!
sepia(100%)
Я попытался следующий стиль CSS на твердом цветном изображении, основание которого цвет #ccc
sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)
Я был в состоянии изменить цвет изображения на зеленый лайм.
Наслаждайтесь ;)
@MichaelPetrotta: почему ты вытащил мой вопрос обратно к первоначальному пересмотру? Я знаю, что мой английский не так уж много, и импровизация, сделанная другим парнем, действительно необходима. –
Его редактирование было плохим - он добавил столько же урона, сколько и удалил. Но вы правы, я удалил некоторые исправления. Я отредактирую. –
Спасибо, человек, я очень ценю это! –