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

Question

Это работает:

a { color: hsla(0,100%,50%,0.2) }

И это не так:

img { color: hsla(0,100%,50%,0.2) }

Есть ли что-то вроде img { opacity: 1 }, которое позволяет определять значения hsl для изображения?

Answer 1

Текст и изображения - это две разные вещи.

Текст отображается в браузере с вашими настройками (оформление, размер шрифта, цвет ...)

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

Параметры, такие как цвет и т. д., не будут влиять на изображение.Параметр color определяет цвет текста.

Редактировать: Если вы хотите применить «цвет» к изображению, вы можете создать div с фоновым изображением, а затем в этом div другой div с цветным фоном.и непрозрачность.таким образом прозрачный цвет будет наложен на изображение.

Answer 2

Вы можете применять фильтры к изображениям в некоторых браузерах: Firefox позволяет применять SVG-фильтры к HTML-контенту из CSS, но Chrome, Safari и Opera вам понадобится обернуть ваш контент в SVG для примененияфильтры к ним, вот пример, который работает в Opera .Возможно, не существует подходящего SVG-фильтра для того, что вам нужно, но это может быть подход, который стоит изучить, если у вас нет других альтернатив.

В Internet Explorer вы можете использовать статический фильтр .

Answer 3

Это работает:

img{ filter: hue-rotate(0deg); }

Степень от 0 до 360.

W3Schools.com: CSS filter Свойство

Answer 4

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

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

Answer 5

Единственный способ повлиять на цвета изображения с помощью css - использовать opacity для управления альфа-каналом.Обратите внимание, что вы могли бы взломать (вроде) изменить яркость вашего изображения, поместив другой элемент поверх if.Убедитесь, что оно точно покрывает изображение, отрегулировав положение и размер, сделайте фоновый цвет черным и установите непрозрачность на 0,5.

Answer 6

Атрибут color используется в качестве цвета для рисования текстовых символов, границ и тому подобного. Это не относится к растровым изображениям.

Следовательно, не имеет значения, добавляете ли вы информацию альфа-канала к значению цвета или нет: вся декларация не применяется.

opacity отличается, потому что оно определяет альфа-значение для целого элемента .