Как изменить цвет картинки в html

Как изменить цвет PNG изображения с помощью CSS

Самый легкий способ для изменения цвета PNG изображения — это использование свойства filter.

Свойство filter применяет визуальные эффекты к элементу (изображению).

Оно имеет следующие значения:

С помощью этих значений мы можем изменить цвет изображения.

Фильтры являются новыми для браузеров и поддерживаются только очень современными браузерами. Можно использовать фильтры вместе с -Webkit-filter для Safari, Google Chrome и Opera.

Давайте попробуем пошагово изменить цвет изображения:

1. Создайте HTML.

Скопируйте и вставьте ссылку изображения в основную часть (body section). Здесь мы создаем две изображения с классами «image1» и «image2».

2. Добавьте CSS.

Теперь добавляем стили к классам «Image1» и «Image2».

Задайте ширину этих изображений с помощью свойства width.
Добавьте свойство filter , чтобы изменить цвет изображения.
Используйте значение «invert», которое инвертирует первое изображение. Здесь устанавливаем 100% для полного инвертирования изображения.
Используйте значение «sepia» (100%), которое превращает второе изображение полностью в сепию.

Посмотрим, каким получился результат:

Пример

Рассмотрим другой пример, где использованы восемь значений свойства filter:

Подключаем SVG-иконку на сайт и меняем цвет через CSS

HTML, CSS

В предыдущих сериях…

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

Возьмем стандартную папку с проектом, в которой есть отдельная папка для изображений, отдельная — для файлов .css , а также файл .html

Подключение через тег <img> в html

Работаем как с обычной картинкой. Тег <img> , атрибут src , прописываем путь к файлу. Можно использовать любые атрибуты <img> , включая атрибут width .

Подключение фона в .css

Можно подключить svg-графику в качестве фона элемента. Часто используются фоновые паттерны. Это небольшой фрагмент, впоследствии повторяющийся и создающий орнамент.

Так выглядит наш паттерн:

Укажите в html нужный класс и пропишите свойства фона background-image в файле css. Используйте функцию url() , чтобы задать путь к файлу с изображением.

Вот, что у нас получилось:

Описываем svg-графику inline

Существуют специальные теги и атрибуты для описания графики прямо в коде. При этом, изображение становится интерактивным — мы можем, например, менять цвет, или размер по наведению на иконку.

Тег <svg> используется как контейнер для хранения SVG графики. При помощи тега <path> и его атрибутов создается фигура. Посмотрите, как выглядит иконка YouTube в inline формате.

Изменение цвета HTML-элементов

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

HTML позволяет менять цвета некоторых элементов и частей содержимого веб-страницы. Например, так вы можете изменить цвет текста, границы или элемента <div>.

Метод изменения цвета этих частей варьируется от элемента к элементу.

В этом мануале вы узнаете, как изменить цвет текста, границ изображения и элементов <div>, используя названия цветов HTML.

Цвет текстовых элементов (типа <p> или <h1>) изменяется с помощью атрибута style и свойства color. Это делается следующим образом:

Попробуйте записать этот код в файл index.html и загрузить его в браузере. Примечание: Если вы работали с этой серией мануалов непоследовательно, рекомендуем обратиться к статье Подготовка HTML-проекта, чтобы создать файл index.html.

Вы должны получить такой результат:

This is blue text.

Цвет границы изображения изменяется с помощью атрибута style и свойства border:

Здесь мы поместили ссылку на изображение и указали, что граница должна быть шириной 10 пикселей и сплошной ( solid ), а не пунктирной.

Попробуйте вставить этот код в файл index.html и загрузить его в браузере.

Примечание: Обратите внимание, что в этом примере мы используем изображение, которое уже размещено в Интернете.

Вы должны получить такой результат:

Цвет контейнера <div> изменяется с помощью атрибута style и свойства background-color. Это можно сделать следующим образом:

Попробуйте написать этот код в файле index.html и загрузить его в браузере. Вы должны получить такой результат:

Во всех этих примерах значение цвета определяется названиями цветов. Попробуйте изменить цвет текста, границ изображения и элементов <div>, используя названия других цветов:

black
white
gray
silver
purple
red
fuchsia
lime
olive
green
yellow
teal
navy
blue
maroon
aqua

Цвета также можно указывать в шестнадцатеричном формате. Шестнадцатеричный код цвета состоит из шести буквенно-цифровых символов, перед которыми идет диез, например:

#0000FF (синий),
#40E0D0 (бирюзовый)
#C0C0C0 (серебристый)

Примечание: В этой серии мануалов мы продолжим использовать названия цветов, а не шестнадцатеричный код.

Теперь у вас есть базовые знания о том, как изменять цвет текста, границ изображения и элементов <div>. Мы вернемся к работе с цветами чуть позже, когда начнем создавать наш веб-сайт.