Как сделать изображение серым css

Добавил пользователь Владимир З.
Обновлено: 04.10.2024

Для того чтобы упростить представление работы css свойства "filter" вы можете воспользоваться онлайн генератором. В левой и правой колонках представлены все 10 вариаций фильтров, кроме того на верхней панели можно переключить центральный вид на одновременное применение всех фильтров. В общем случае после выбора необходимого вам свойства, в центральной колонке будет отображен блог с изображением, ползунком и поле с кодом. Изменяя значения фильтра с помощью ползунка вы тут же сможете увидеть как будет выглядеть тот или иной фильтр, код также будет реагировать на движение ползунка и его можно скопировать сразу же после достижения нужного результата.

Формат изображения* - формат изображения для которого применяется фильтр.

Параметры вставки фильтра* - выбор как будет загружен фильтр на страницу.

Активировать все фильтры - открывается вид с ползунками для каждого фильтра. Фильтры будут применены одновременно.

Перезагрузка - сброс всех параметров.

* - В будущем будут добавлены варианты для изменения и этих параметров.

Общая информация о свойстве CSS - Filter

CSS свойство filter позволяет манипулировать цветом изображения путём наложения на него различных фильтров, таких как сепия, оттенки серого, насыщенность и т.д. Так как свойство введено относительно недавно (первое описание стандарта от 25 октября 2012) его не поддерживают старые браузеры, в том числе вся линейка Internet Explorer.

Поддержка CSS свойства filter в разных браузерах:

Не совместимо с IE. Подробнее о возможной совместимости - Microsoft Library.
Edge - не поддерживается url.
Chrome с 58 до 49 версии и Android Browser в Android 4.4 и 4.4.4 требуют добавления префикса "-webkit-".

Описание значений свойства filter

BLUR - Размытие

Возможные величины: длина (px,rem,vw,vh и т.д.).

Диапазон: 0 - ∞; где ноль исходное изображение.

Описание: Размытие, смещение резкости, расфокусировка. При больших значениях свойства, изображение может становиться близким к монотонному. Также при больших значениях может понадобиться время чтобы эффект отрендерился в браузере.

Пример: filter: blur(10px);

BRIGHTNESS - Яркость

Возможные величины: число, проценты.

Диапазон: 0 - ∞, 0%-∞%;где 1 или 100% - оригинальное изображение.

Описание: Увеличение и снижение яркости. При величине меньше единицы или 100% изображение будет темнеть (в нуле чёрное), при значениях больше единицы или 100% изображение будет становиться ярче.

Пример: filter: brightness(0.2);

CONTRAST - Контраст

Возможные величины: число, проценты.

Диапазон: 0 - ∞, 0%-∞%;где 1 или 100% - оригинальное изображение.

Описание: Увеличение и снижение контрастности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле серое), при значениях больше единицы или 100% на изображении будет увеличиваться количество цветовых оттенков.

Пример: filter: contrast(200%);

DROP-SHADOW - Тень

Возможные величины: Длина и цвет для тени.

Диапазон: любое значение для первых двух параметров смещения; 0 - ∞, для параметра размытия, где 0 - отсутствие размытия.

GRAYSCALE - Оттенки серого

Возможные величины: число, проценты.

Диапазон: 0 - 1, 0%-100%;где 0 или 0% - оригинальное изображение.

Описание: Увеличение и снижение количество цветов на изображении.

Пример: filter: grayscale(0.2);

HUE-ROTATE - Смещение цвета

Возможные величины: угловые (градусы, радианы)

Диапазон: любое значение ; где 0 или 360deg - оригинальное изображение.

Описание: Действие основано на замене текущего цвета, на цвет который будет получен при смещении на заданный угол по цветовому кругу. Например, синий цвет при смещении угла в 90 градусов - filter: hue-rotate(90deg), сменится на салатовый, а при значении 180deg смениться на жёлтый.

Пример: filter: hue-rotate(180deg);

INVERT - Инвертирование цвета

Возможные величины: число, проценты.

Диапазон: 0 - 1 , 0%-100%; где 0 или 0% - оригинальное изображение.

Описание: Инвертирование цвета (например, с чёрного в белый), 0 - оригинальное изображение, 1 или 100% полностью инвертированное. В середине процесса инвертирования (0.5 или 50%) изображение становится полностью серым.

Пример: filter: invert(90%);

Opacity - Прозрачность

Возможные величины: число, проценты.

Диапазон: 0 - 1 , 0%-100%; где 1 или 100% - оригинальное изображение.

Описание: Прозрачность. Разница между обычным свойством 'opacity' в том, что фильтр можно наложить совместно с другими фильтрами при этом не получить умножение прозрачности для всего блока. Свойство opacity: 0.5 и filter: opacity(0.5) без примесей других модификаторов - равнозначны, но при этом применённые к одному блоку не дадут ему полную прозрачность. (Можете попинать в комментариях в более правильном направлении).

Пример: filter: opacity(0.7);

Saturate - Насыщенность

Возможные величины: число, проценты.

Диапазон: 0 - ∞, 0%-∞%; где 1 или 100% - оригинальное изображение.

Описание: Увеличение и снижение насыщенности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле будут использованы только оттенки серого, равнозначно grayscale(1) ), при значениях больше единицы или 100% на изображении будет увеличиваться насыщенность цветов.

Пример: filter: saturate(0.7);

SEPIA - Сепия

Возможные величины: число, проценты.

Диапазон: 0 - 1, 0%-100%; где 0 или 0% - оригинальное изображение.

Описание: Имитация выцветшей фотографии (эффект старины). На 100% или 1, в изображении будут использованы только оттенки коричневого (светло-коричневого) цвета.

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

Он обязательно должен быть серым? Вы можете просто уменьшить непрозрачность изображения (чтобы сделать его более тусклым). В качестве альтернативы вы можете создать

Старый добрый Internet Explorer. Вы можете сделать больше с атрибутом filter; поскольку он использует DirectDraw для рендеринга. Но тогда он работает только в IE

Используйте свойство фильтра CSS3:

чтобы сделать его еще темнее, добавьте contrast(x%) свойство, например grayscale(100%) contrast(30%) .

Поддержка браузера - реальная проблема, поскольку она определенно не работает в IE10, IE11, FF26, Safari 5.1.x (Win7 x64) или практически во всем за пределами Chrome (пример).

Это не позволяет вам установить для него светло-серый цвет, но если на белом фоне, вы можете использовать его в сочетании с непрозрачностью, чтобы это произошло; img < filter: grayscale(100%); opacity: 0.4; >

Настройте IE10 + на рендеринг в стандартном режиме IE9, используя следующий метаэлемент в заголовке:
Используйте оверлей SVG в IE10 для выполнения серого в Internet Explorer 10 - как применить фильтр оттенков серого?

Если вы не против использовать немного JavaScript, jQuery fadeTo () прекрасно работает во всех браузерах, которые я пробовал.

Просто наткнулся на мой старый ответ здесь снова. Я бы ни за что не использовал для этого сейчас JS. Чистый CSS намного лучше.

Лучше поддерживать все браузеры:

Полезные заметки

Вот пример, который позволяет вам установить цвет фона. Если вы не хотите использовать float, вам может потребоваться установить ширину и высоту вручную. Но даже это действительно зависит от окружающего CSS / HTML.

Вы можете использовать rgba() в css для определения цвета вместо rgb() . Нравится: style='background-color: rgba(128,128,128, 0.7);

Хорошо, поэтому вы создаете прямоугольник полупрозрачного серого (или любого другого цвета) и кладете его поверх своего изображения, возможно, с position: absolute и z-index выше нуля, и вы помещаете его непосредственно перед вашим изображением и по умолчанию место для прямоугольника будет в том же верхнем левом углу вашего изображения. Должно сработать.

Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.

Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.

Видео Filter CSS 3 – фильтры изображений:

Пример страницы, которую мы создаём в уроке:

Внимание! Свойство filters сейчас на стадии тестирования и поддерживается только браузером Firefox полностью. А браузером Chrome и другими на основе движка Webkit, это свойство работает только при добавлении префиксов. Префиксы я показываю в конце урока, поэтому рекомендую его сначала проходить на Firefox последней версии.

Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.

10 эффектов фильтров в CSS3

Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут.

1. Фильтр размытие - blur

Если говорить простым языком, то это обычное размытие картинки. Фильтр подойдет, если вам нужно сделать края более мягкими. За счет размытия создается ощущение фона, который не в фокусе.

Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:

Слева, для наглядности, я поставил обычную картинку, а вот справа то же самое изображение, только изменённое при помощи CSS3.

Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.

Фильтр яркость — brightness

Этот фильтр напоминает изменение яркости экрана телевизора. В данном случае регулируется цвет между черным и оригинальным цветом по мере добавления параметров.

А вот и наш подопытный конь:

Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% - оригинальным, а при 200% - станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.

Фильтр brightness может задаваться 3 способами:

целые числа
дробные числа
проценты

Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.

3. Фильтр контрастность — contrast

Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% - это значение по умолчанию. 0% - черное изображение. А все, что больше 100%, добавляет вам контраст.

На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:

Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно.

4. Фильтр насыщенность — saturate

Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение - 200%. Повысим насыщенность нашей картиночки в 2 раза.

Море стало заметно приятнее:

Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем??

5. Фильтр прозрачность — opacity

Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:

целые и дробные числа: от 0 до 1
проценты: от 0% до 100

Давайте попробуем уменьшить прозрачность на 50% следующей картинке.

Посмотрите, что вышло:

6. Фильтр Инверсия - invert

Он позволяет вам "переворачивать" цвета. На значения данного фильтра также вводятся ограничения:

целые и дробные числа: от 0 до 1
проценты: от 0% до 100

В нашем случае установим максимальное значение - 100 %:

И красивая спортивная машина лёгким движением руки превращается в.

Этот фильтр помог нам создать эффект негатива на самом изображении.

7. Фильтр cепия — sepia

Он позволит вам изменить цвет, добавив оттенок сепия. То есть вы получите имитацию старой фотографии. На значения фильтра ограничения указываются те же самые, что и в двух предыдущих.

целые и дробные числа: от 0 до 1
проценты: от 0% до 100

Ну что? Попробуемс?

Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет Кажется, у меня крыша потекла с этими примерами.

В нашем случае мы указали дробное значение - 0,5. Но вы можете экспериментировать, как вашей душе угодно!

8. Фильтр оттенки серого — grayscale

Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:

целые и дробные числа: от 0 до 1
проценты: от 0% до 100

Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 - к 100%.

Зададим значение - 0.7 (или 70%):

9. Фильтр оттенок освещения — hue-rotate

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

Мы зададим значение - 300 градусов:

Ну и кто здесь говорил, что розовых обезьян не бывает?

10. Фильтр тень - drop-shadow

Фильтр задается сразу несколькими значениями. Сначала мы задаем значение по оси X, потом - по оси Y. Так мы обозначаем смещение тени по оси X и Y. Далее указывается радиус нашей тени и последним атрибутом - ее цвет.

В нашем случае укажем смещение тени на 3 пикселя, размер 5 и цвет тёмно-серый.

Обратите внимание, за счёт тени создается впечатление, будто вторая картинка приподнята.

Кстати, в самом видео-уроке мы не только разбирали все эти свойства, но и учились делать анимацию. И в нём создавали эффект поднятия картины при наведении. В Демо есть пример

PS: Друзья, если Вы хотите полностью изучить HTML5 и CSS3, и научиться верстать классные сайты – записывайтесь на тренинг Верстаем на 5+

Там вас ждем много интересных фишек и секретов по созданию сайтов. Будет интересно!

Супер статья. Я думал, что много знаю о CSS, но эта статья вдохновила на столько идей .

Ниче себе! Спасибо Серж!)

Как всегда - круто! Очень полезно! Спасибо!

И тут же я решил проверить действие фильтра в разных браузерах.

Подопытными кроликами стали:

Pale Moon (Версия 25.2.1 (x64))

Comodo Dragon (Версия 36.1.1.21)

Opera (Версия 27.0)

Vivaldi (Версия 1.0.83.38)

и Internet Explorer (Версия 11 не обновлял давно).

Разочаровал мой любимый Pale Moon. Кроме drop-shadow не работала ни одна картинка. Да и то без отбрасывания тени. И это учитывая, что Pale Moon разработан на основе FireFox. Может с настройками у меня что-то не в порядке ?

Comodo Dragon все показал как надо - чем и порадовал.

Opera тоже блестнула. Всё абсолютно без нареканий.

Vivaldi удивил. Картинки (все) сначала пропадали вовсе, а потом появлялись уже с готовым эффектом (примерно через секунду). Полагаю, что, отколовшись от Opera , Vivaldi пишут с какими-то новыми прибабахами о которых я не знаю. Ну и ладно. Не о браузерах речь.

Internet Explorer отработал полностью Pale Moon --но подобным образом. Т.е. почти никак.

Мои скромный вывод: разработчики браузеров со временем выпустят новые версии где всё будет работать, а мы используем действие фильтра на полную катушку.

За сим разрешите мне завершить свой пост.

Спасибо Серёга.За время знакомства с тобой, я получил действительно много полезного контента. Но самое главное, что в наше быстротечное время, с кучей информации, твоя полезна своей новизной и важностью.Если ты предлагаешь обратить на, что то внимание, значит это самая современная тенденция.Не исключение изучение РЕЬД-5 и CSS-3 Спасибо.

Провёл проверку в Safari браузере(IPad 2). Всё прекрасно работает! Версия браузера последняя на данный момент

"Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. grin Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно. ". Ага будем использовать методы которые жрут cpu, и оперативку(а если акселерация у браузера то оперативку x2)

Ага будем сидеть в каменном веке и работать только на калькуляторах. Мамонты вымирают, знаете ли Технологии придумывают для того, что бы их использовали. Одна картинка с анимацией на страницу - ничего не сделает.

Учитывая прозрачный PNG, отображающий простую форму в белом, возможно ли каким-то образом изменить его цвет с помощью CSS? Какая-то накладка или что нет?

Вы можете установить background-color свойство CSS. Вы можете создать непрозрачную часть, которая будет фиксированной, и прозрачную часть изображения, которая будет заполнена любым цветом, который вам нравится, с помощью CSS. Это то, что вы хотите достичь?

Вы можете изменить изображение на оттенки серого, сепию и многое другое (посмотрите на пример).

Теперь вы можете изменить цвет файла PNG с помощью фильтров.

Таким образом, короткий ответ заключается в том, что для большинства браузеров не существует общего решения.

@datatype_void Иногда вы сами не контролируете начальное изображение. Итак, кажется, что вы согласны с тем, что моя точка зрения верна, вы не можете получить любой цвет, начиная с черного или белого. О, и я играл более 5 минут, чтобы прийти к такому выводу.

также укажите, что вы можете делать такие вещи: .jpgcorrect < filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); >это означает, что вы МОЖЕТЕ перейти от черного и прозрачного или в оттенках серого к цвету, и это работает даже на анимированных GIF-изображениях

Я нашел этот замечательный пример codepen, в котором вы вставляете шестнадцатеричное значение цвета, и он возвращает необходимый фильтр для применения этого цвета к png.

тогда вам нужно применить следующий фильтр к вам png

Я изменил цвет с белого на синий, используя этот код: filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);

Автор заслуживает статуи! (обратите внимание на: яркость (0), насыщенный (100%) необязательный препенд, который убивает любые сомнения)

РЕДАКТИРОВАТЬ: я использую Font-Awesome в моем последнем проекте. Вы можете даже загрузить его. Просто поместите это в свой :

А затем добавьте несколько значков-ссылок, например:

Font-Awesome использует разные имена классов в новой версии, возможно потому, что это делает CSS-файлы значительно меньше и позволяет избежать двусмысленных классов CSS. Итак, теперь вы должны использовать:

Только что выяснил, Github также использует свой собственный значок шрифта: Octicons Это бесплатно скачать. У них также есть несколько советов о том, как создавать свои собственные иконки шрифтов .

+1 за нестандартное мышление. И в настоящее время существуют простые в использовании онлайн-приложения, которые помогут вам создать веб-шрифт из изображения (svg).

Если - это старое имя класса, а - новое, я не думаю, что это делает CSS меньше, я могу видеть дополнительный пробел между fa и fa-thumbs-up, добавить по крайней мере 1 дополнительный байт в этот файл CSS, если я не ошибаюсь?

Font Awesome был великолепен в свое время, к сожалению, его блокировка рендера делает Google и пользователей несчастными. Сначала мы решили эту проблему, удалив неиспользуемые шрифты из файлов CSS и двоичных шрифтов, сократив данные примерно вдвое. Сейчас мы находимся в процессе полного удаления и замены простым спрайтом, который не блокирует рендеринг (DOM и CSSOM обрабатывают быстрее, а элементы на странице выглядят быстрее) и сократят данные еще на 75%, до 6 КБ. FA составляет около 100 КБ. Маски CSS могут помочь в нашем случае, но, вероятно, в этом нет необходимости.

Я был в состоянии сделать это с помощью фильтра SVG. Вы можете написать фильтр, который умножает цвет исходного изображения на цвет, который вы хотите изменить. В приведенном ниже фрагменте кода цвет заливки - это цвет, который мы хотим изменить на цвет изображения (в данном случае это красный.) FeComposite сообщает фильтру, как мы обрабатываем цвет. Формула для feComposite с арифметикой имеет вид (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), где i1 и i2 - входные цвета для in / in2 соответственно. Таким образом, указание только k1 = 1 означает, что он будет делать только i1 * i2, что означает умножение обоих входных цветов вместе.

Примечание. Это работает только с HTML5, так как использует встроенный SVG. Но я думаю, что вы могли бы сделать это с более старым браузером, поместив SVG в отдельный файл. Я еще не пробовал такой подход.

Читайте также: