Необходимо изображение отобразить в явно заданном цветовом спектре. В моем случае иконка полностью черная, а хотелось бы, скажем, получить красную или оранжевую. Яндекс преимущественно выдавал -webkit-filter, но я так и не понял как его применить в данном случае. Спасибо!
3
-
Спасибо за ответ soledar10! но появился еще вопрос: как победить изображение, которое имеет только оттенки серого? – Azat Khanov 16 фев '14 в 18:40
-
Решение не найдено. Есть возможность изменить цвет за счет других цветов на изображении, но если рисунок монохромный -- не выходит. – Azat Khanov 16 фев '14 в 20:17
-
Всем участникам спасибо! – Azat Khanov 17 фев '14 в 14:39
добавить комментарий
|
2 ответа
Если кому нужно кроссбраузерное решение, то вот код:
.fimg {
position: relative;
/* Нужно, чтобы абсолютно позиционированные дочерние элементы позиционировались относительно края родителя. */
display: inline-block;
}
.fimg img,
.filter {
width: 150px;
height: 150px;
}
.filter {
top: 0px;
left: 0px;
/* Принудительно размещаем фильтр прямо над изображением. */
z-index: 1;
/* Фильтр расположен на один уровень выше изображения. */
position: absolute;
/* Абсолютно позиционированный элемент. Поскольку позиционирование родителя задано как relative, позиция фильтра задаётся относительно края родителя. */
background-color: rgba(254, 128, 128, .29);
/* Первые три числа -- десятичное значение цвета в RGB, четвёртое -- прозрачность, в сотых, от 0 (полностью прозрачен) до 1 (полностью непрозрачен). Запись .29 аналогична 0.29. */
}
<div class="fimg">
<!-- Оборачиваем фильтр и картинку в div, чтобы у них был общий родитель. -->
<span class="filter"></span>
<!-- Фильтр -->
<img src="http://bezproblem.ucoz.ru/iconki/cerno_belye/1/02.png" alt="" />
<!-- Изображение -->
</div>
-
Но ведь png с прозрачностью превратится в прямогульник заданного цвета. Конечно за неимением лучшего может пригодится, но совсем не то. – x-positive 3 июн '17 в 11:14
- изменяя значение hue-rotate(100deg); - получаете нужный цвет от 0 до 360
Спецификация
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterFunction
Поддержка браузерами
-
jsfiddle.net/R2WPG/1 похожий случай у меня. суть я понял. здесь речь идет о рисунках, которые имеют хоть бы еще один оттенок, кроме серого. – Azat Khanov 16 фев '14 в 19:01
-
-
-
Если у вас есть решение, тем более кроссбраузерное, то я буду только рад! – Azat Khanov 16 фев '14 в 19:26
-
Для кроссбраузерного решения используйте иконки необходимого цвета - как вариант – soledar10 16 фев '14 в 19:28