Учитывая прозрачный PNG, отображающий простую форму в белом, возможно ли каким-то образом изменить его цвет с помощью CSS? Какая-то накладка или что нет?
Вы можете установить background-colorсвойство CSS. Вы можете создать непрозрачную часть, которая будет фиксированной, и прозрачную часть изображения, которая будет заполнена любым цветом, который вам нравится, с помощью CSS. Это то, что вы хотите достичь?
jakub.g
2
@qbk, это стоит ответа, а не просто комментарий. И вы били меня на 1 секунду, технически.
Кирилл G
2
Вы можете использовать psuedo-элементы с режимом смешивания, чтобы перекрасить любой значок, который на 100% черный или 100% белый (фон остается прозрачным). Смотрите мой ответ здесь: stackoverflow.com/a/39796437/1472114
chrscblls
Ответы:
570
Вы можете использовать фильтры с -webkit-filterи filter: Фильтры являются относительно новыми для браузеров, но поддерживаются в более чем 90% браузеров согласно следующей таблице CanIUse: https://caniuse.com/#feat=css-filters
Вы можете изменить изображение на оттенки серого, сепию и многое другое (посмотрите на пример).
Теперь вы можете изменить цвет файла PNG с помощью фильтров.
@datatype_void Иногда вы сами не контролируете начальное изображение. Итак, кажется, что вы согласны с тем, что моя точка зрения верна, вы не можете получить любой цвет, начиная с черного или белого. О, и я играл более 5 минут, чтобы прийти к такому выводу.
AsGoodAsItGets
5
также укажите, что вы можете делать такие вещи: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }это означает, что вы МОЖЕТЕ перейти от черного и прозрачного или в оттенках серого к цвету, и это работает даже на анимированных GIF-изображениях
tatsu
141
Я нашел этот замечательный пример codepen, в котором вы вставляете шестнадцатеричное значение цвета, и он возвращает необходимый фильтр для применения этого цвета к png.
РЕДАКТИРОВАТЬ: я использую Font-Awesome в моем последнем проекте. Вы можете даже загрузить его. Просто поместите это в свой <head>:
<linkhref="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"rel="stylesheet"><!-- And if you want to support IE7, add this aswell --><linkhref="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css"rel="stylesheet">
А затем добавьте несколько значков-ссылок, например:
Font-Awesome использует разные имена классов в новой версии, возможно потому, что это делает CSS-файлы значительно меньше и позволяет избежать двусмысленных классов CSS. Итак, теперь вы должны использовать:
+1 за нестандартное мышление. И в настоящее время существуют простые в использовании онлайн-приложения, которые помогут вам создать веб-шрифт из изображения (svg).
Иван Вандер Санден
Если <a class="icon-thumbs-up"> </a> - это старое имя класса, а <a class="fa fa-thumbs-up"> </a> - новое, я не думаю, что это делает CSS меньше, я могу видеть дополнительный пробел между fa и fa-thumbs-up, добавить по крайней мере 1 дополнительный байт в этот файл CSS, если я не ошибаюсь?
Брандито
Font Awesome был великолепен в свое время, к сожалению, его блокировка рендера делает Google и пользователей несчастными. Сначала мы решили эту проблему, удалив неиспользуемые шрифты из файлов CSS и двоичных шрифтов, сократив данные примерно вдвое. Сейчас мы находимся в процессе полного удаления и замены простым спрайтом, который не блокирует рендеринг (DOM и CSSOM обрабатывают быстрее, а элементы на странице выглядят быстрее) и сократят данные еще на 75%, до 6 КБ. FA составляет около 100 КБ. Маски CSS могут помочь в нашем случае, но, вероятно, в этом нет необходимости.
YK
25
Я был в состоянии сделать это с помощью фильтра SVG. Вы можете написать фильтр, который умножает цвет исходного изображения на цвет, который вы хотите изменить. В приведенном ниже фрагменте кода цвет заливки - это цвет, который мы хотим изменить на цвет изображения (в данном случае это красный.) FeComposite сообщает фильтру, как мы обрабатываем цвет. Формула для feComposite с арифметикой имеет вид (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), где i1 и i2 - входные цвета для in / in2 соответственно. Таким образом, указание только k1 = 1 означает, что он будет делать только i1 * i2, что означает умножение обоих входных цветов вместе.
Примечание. Это работает только с HTML5, так как использует встроенный SVG. Но я думаю, что вы могли бы сделать это с более старым браузером, поместив SVG в отдельный файл. Я еще не пробовал такой подход.
Человек, которого ты ограбил на этот ответ. Любой, кто хочет раскрасить изображения сверх того, что может сделать фильтр: оттенок-поворот - это способ сделать это.
MaxPRafferty
23
Тег img имеет свойство background, как и любой другой. Если у вас есть белый PNG с прозрачной формой, такой как трафарет, то вы можете сделать это:
Я хочу, чтобы белая часть была окрашена по-другому, а не прозрачная.
Уэсли
2
лучшее решение, которое я нашел до сих пор. Очень жаль, что это сработает только в том случае, если вы будете использовать на своих сайтах сплошной фоновый цвет
Jules Colle
8
@ Уэсли, вам нужно затем инвертировать изображение (чтобы белый бит стал прозрачным, а остальное белым), что вы можете сделать, используя ваш любимый редактор изображений и маски.
Чарльз Гудвин
5
@CharlesGoodwin Это работает только тогда, когда изображение помещается на белом фоне.
WebKit теперь поддерживает альфа-маски в CSS. Маски позволяют накладывать содержимое блока на шаблон, который можно использовать для выбивания частей этого блока на конечном экране. Другими словами, вы можете обрезать сложные формы, основываясь на альфа-изображении.
[...]
Мы ввели новые свойства, чтобы предоставить веб-дизайнерам большой контроль над этими масками и тем, как они применяются. Новые свойства аналогичны уже существующим свойствам фона и изображения границы.
Это часть какого-то (пока не вступившего) стандарта, поскольку я не нашел никакой информации, не связанной с Webkit, или это просто аромат Apple? Похоже, что W3 предлагает SVG для таких случаев: w3.org/TR/SVG/masking.html
feeela
3
К сожалению, это, кажется, только webkit, и блог обманывает, используя составные изображения, а не реальные примеры. Этот ответ немного красной сельди.
Речь шла о раскраске белого изображения на прозрачном фоне. hue-rotateне работает на белом.
Synetech
17
Думаю, у меня есть решение для этого: а) именно то, что вы искали 5 лет назад, и б) немного проще, чем другие варианты кода здесь.
С любым белым png (например, белым значком на прозрачном фоне), вы можете добавить селектор :: after, чтобы перекрасить.
.icon {
background: url(img/icon.png);/* Your icon */
position: relative;/* Allows an absolute positioned psuedo element */}.icon::after{
position: absolute;/* Positions psuedo element relative to .icon */
width:100%;/* Same dimensions as .icon */
height:100%;
content:"";/* Allows psuedo element to show */
background:#EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply;/* Only apply color on top of white, use screen if icon is black */}
Я перенес образ с imgur, у меня были проблемы с загрузкой.
chrscblls
В последней версии Chrome похоже, что (прозрачный) фон также получает цвет. В связанном примере, когда я нахожусь, я просто вижу непрозрачный розовый квадрат ... Хорошо работает в Firefox.
logidelic
1
@chrscblls Ссылка мертва.
Стивен Лу
15
Самая простая строка, которая работала для меня:
filter: opacity(0.5) drop-shadow(000 blue);
Вы можете настроить непрозрачность от 0 до 1, чтобы сделать цвет светлее или темнее.
Ницца. Это позволяет избежать всех ограничений других решений здесь.
cdonner
3
Повторите
падающую
1
Решение GENIUS выглядит немного неопрятно в CSS, но с комментариями это вполне понятно. Спасибо!
Ричард КемиКал Генерал Дентон
не получится получить точный цвет, это всегда какая-то смесь оригинального цвета с новым.
swisswiss
этот подход немного искажает изображение и ухудшается каждый раз, когда применяется тень. Как и при копировании копии, результаты отличаются от оригинала.
SMAG
8
Я нашел это, пока гуглил, я нашел лучшую работу для меня ...
Это работает, я проголосовал за. Но только для записи у него есть некоторые проблемы, такие как не удается определить размер фонового изображения, не может расположить изображение, и оно повторяется.
Мне требовался определенный цвет, поэтому фильтр не работал для меня.
Вместо этого я создал div, используя несколько фоновых изображений CSS и функцию линейного градиента (которая создает само изображение). Если вы используете режим наложения оверлея, ваше фактическое изображение будет смешано с созданным «градиентным» изображением, содержащим желаемый цвет (здесь # BADA55)
@VicSeedoubleyew фрагмент работает нормально. Проверьте ваш div с помощью инструментов dev, чтобы убедиться, что ваш CSS действительно применяется. Кроме того, убедитесь, что URL-адрес вашего изображения действителен, если вы не используете тот, который я предоставил. РЕДАКТИРОВАТЬ: Если фрагмент не работает для вас, вы можете использовать браузер, который устарел или не поддерживает функцию линейного градиента.
rolznz
5
Отвечая, потому что я искал решение для этого.
ручка в ответе @chrscblls хорошо работает, если у вас белый или черный фон, а у меня - нет. Кроме того, изображения были сгенерированы с помощью ng-repeat, поэтому у меня не может быть их URL в моем css, и вы не можете использовать :: after для тегов img.
Итак, я обдумал работу и подумал, что это может помочь людям, если они слишком спотыкаются здесь.
Так что я сделал то же самое с тремя основными отличиями:
URL-адрес в моем теге img, я помещаю его (и метку) в другой div, на котором будет работать :: after.
«mix-blend-mode» установлен на «разность» вместо «умножение» или «экран».
Я добавил :: before с точно таким же значением, чтобы :: after выполнял «разницу» с «разницей», сделанной :: before, и отменил сам.
Чтобы изменить его с черного на белый или с белого на черный, цвет фона должен быть белым. От черного до цвета, вы можете выбрать любой цвет. От белого до цветов, вам нужно будет выбрать цвет, противоположный тому, который вы хотите.
Нет необходимости в полном наборе шрифтов, если вам нужен только один значок, плюс я чувствую, что он более «чистый» как отдельный элемент. Таким образом, для этой цели в HTML5 вы можете поместить SVG непосредственно в поток документов. Затем вы можете определить класс в вашей таблице стилей .CSS и получить доступ к его цвету фона с помощью fillсвойства:
Обратите внимание, что в примере я использовал :hoverдля иллюстрации поведения; если вы просто хотите изменить цвет для «нормального» состояния, вы должны удалить псевдокласс.
Чтобы буквально изменить цвет, вы можете включить CSS-переход с -webkit-filter, где, когда что-то происходит, вы вызываете -webkit-filter по вашему выбору. Например:
При изменении изображения с черного на белый или с белого на черный фильтр поворота оттенка не работает, поскольку черный и белый цвета технически не являются. Вместо этого черно-белые изменения цвета (с черного на белый или наоборот) должны быть выполнены с помощью свойства инвертированного фильтра.
background-colorсвойство CSS. Вы можете создать непрозрачную часть, которая будет фиксированной, и прозрачную часть изображения, которая будет заполнена любым цветом, который вам нравится, с помощью CSS. Это то, что вы хотите достичь?Ответы:
Вы можете использовать фильтры с
-webkit-filterиfilter: Фильтры являются относительно новыми для браузеров, но поддерживаются в более чем 90% браузеров согласно следующей таблице CanIUse: https://caniuse.com/#feat=css-filtersВы можете изменить изображение на оттенки серого, сепию и многое другое (посмотрите на пример).
Теперь вы можете изменить цвет файла PNG с помощью фильтров.
Источник
источник
.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }это означает, что вы МОЖЕТЕ перейти от черного и прозрачного или в оттенках серого к цвету, и это работает даже на анимированных GIF-изображенияхЯ нашел этот замечательный пример codepen, в котором вы вставляете шестнадцатеричное значение цвета, и он возвращает необходимый фильтр для применения этого цвета к png.
Генератор фильтров CSS для преобразования из черного в целевой шестнадцатеричный цвет
например, мне нужен был мой png, чтобы иметь следующий цвет # 1a9790
тогда вам нужно применить следующий фильтр к вам png
источник
filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);Возможно, вы захотите взглянуть на Icon шрифты. http://css-tricks.com/examples/IconFont/
РЕДАКТИРОВАТЬ: я использую Font-Awesome в моем последнем проекте. Вы можете даже загрузить его. Просто поместите это в свой
<head>:А затем добавьте несколько значков-ссылок, например:
Вот полный шпаргалка
--редактировать--
Font-Awesome использует разные имена классов в новой версии, возможно потому, что это делает CSS-файлы значительно меньше и позволяет избежать двусмысленных классов CSS. Итак, теперь вы должны использовать:
РЕДАКТИРОВАТЬ 2:
Только что выяснил, Github также использует свой собственный значок шрифта: Octicons Это бесплатно скачать. У них также есть несколько советов о том, как создавать свои собственные иконки шрифтов .
источник
Я был в состоянии сделать это с помощью фильтра SVG. Вы можете написать фильтр, который умножает цвет исходного изображения на цвет, который вы хотите изменить. В приведенном ниже фрагменте кода цвет заливки - это цвет, который мы хотим изменить на цвет изображения (в данном случае это красный.) FeComposite сообщает фильтру, как мы обрабатываем цвет. Формула для feComposite с арифметикой имеет вид (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), где i1 и i2 - входные цвета для in / in2 соответственно. Таким образом, указание только k1 = 1 означает, что он будет делать только i1 * i2, что означает умножение обоих входных цветов вместе.
Примечание. Это работает только с HTML5, так как использует встроенный SVG. Но я думаю, что вы могли бы сделать это с более старым браузером, поместив SVG в отдельный файл. Я еще не пробовал такой подход.
Вот фрагмент:
источник
Тег img имеет свойство background, как и любой другой. Если у вас есть белый PNG с прозрачной формой, такой как трафарет, то вы можете сделать это:
источник
Да :)
источник
В большинстве браузеров вы можете использовать фильтры:
на обоих
<img>элементах и фоновых изображений других элементови установить их либо статически в вашем CSS, либо динамически с помощью JavaScript
Смотрите демоверсии ниже.
<img>элементыВы можете применить эту технику к
<img>элементу:Фоновые изображения
Вы можете применить эту технику к фоновому изображению:
JavaScript
Вы можете использовать JavaScript для установки фильтра во время выполнения:
источник
hue-rotateне работает на белом.Думаю, у меня есть решение для этого: а) именно то, что вы искали 5 лет назад, и б) немного проще, чем другие варианты кода здесь.
С любым белым png (например, белым значком на прозрачном фоне), вы можете добавить селектор :: after, чтобы перекрасить.
См. Этот кодовый блок (применение цветовой замены при наведении): http://codepen.io/chrscblls/pen/bwAXZO
источник
Самая простая строка, которая работала для меня:
Вы можете настроить непрозрачность от 0 до 1, чтобы сделать цвет светлее или темнее.
источник
Я нашел это, пока гуглил, я нашел лучшую работу для меня ...
HTML
CSS
http://jsfiddle.net/a63b0exm/
источник
Мне требовался определенный цвет, поэтому фильтр не работал для меня.
Вместо этого я создал div, используя несколько фоновых изображений CSS и функцию линейного градиента (которая создает само изображение). Если вы используете режим наложения оверлея, ваше фактическое изображение будет смешано с созданным «градиентным» изображением, содержащим желаемый цвет (здесь # BADA55)
источник
Отвечая, потому что я искал решение для этого.
ручка в ответе @chrscblls хорошо работает, если у вас белый или черный фон, а у меня - нет. Кроме того, изображения были сгенерированы с помощью ng-repeat, поэтому у меня не может быть их URL в моем css, и вы не можете использовать :: after для тегов img.
Итак, я обдумал работу и подумал, что это может помочь людям, если они слишком спотыкаются здесь.
Так что я сделал то же самое с тремя основными отличиями:
Чтобы изменить его с черного на белый или с белого на черный, цвет фона должен быть белым. От черного до цвета, вы можете выбрать любой цвет. От белого до цветов, вам нужно будет выбрать цвет, противоположный тому, который вы хотите.
https://codepen.io/spaceplant/pen/oZyMYG
источник
Нет необходимости в полном наборе шрифтов, если вам нужен только один значок, плюс я чувствую, что он более «чистый» как отдельный элемент. Таким образом, для этой цели в HTML5 вы можете поместить SVG непосредственно в поток документов. Затем вы можете определить класс в вашей таблице стилей .CSS и получить доступ к его цвету фона с помощью
fillсвойства:Рабочая скрипка: http://jsfiddle.net/qmsj0ez1/
Обратите внимание, что в примере я использовал
:hoverдля иллюстрации поведения; если вы просто хотите изменить цвет для «нормального» состояния, вы должны удалить псевдокласс.источник
Чтобы буквально изменить цвет, вы можете включить CSS-переход с -webkit-filter, где, когда что-то происходит, вы вызываете -webkit-filter по вашему выбору. Например:
источник
При изменении изображения с черного на белый или с белого на черный фильтр поворота оттенка не работает, поскольку черный и белый цвета технически не являются. Вместо этого черно-белые изменения цвета (с черного на белый или наоборот) должны быть выполнены с помощью свойства инвертированного фильтра.
.img1 { filter: invert(100%); }источник
Источник: https://codepen.io/taryaoui/pen/EKkcu
источник