У меня есть изображение небесно-голубой звезды, я хотел бы изменить только цвет звезды.
#estrella img{
height: 35px;
}
</html>
<head>
<title>Cambiar el color de la imagen</title>
</head>
<div id="estrella"><img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Star.png"></div>
</html>
Как я могу внести это изменение, используя правила css?
Для таких вещей есть SVG .
Нет смысла использовать внешнее изображение, когда вы можете сохранить этот HTTP-запрос, а также сделать его более удобным для сопровождения.
ПОМЕЧЕНО:
Сначала мы определяем нашу звезду с помощью флага
<path>
:Важно, чтобы вы использовали переменную CSS
currentColor
в атрибутеfill
, чтобы<path>
иметь возможность изменить цвет значка с помощью свойстваcolor
в CSS.Теперь, когда у нас есть звезда, мы поместим ее в метку
<symbol>
и присвоим ей значение,id
чтобы мы могли использовать ее несколькими шагами позже. Вы можете добавить заголовок, чтобы помочь с проблемами доступности. (Информация о viewBox здесь )Далее мы сделаем наш лист спрайтов для использования в качестве контейнера, если мы хотим добавить больше значков. Мы предоставим вам
id
возможность скрыть элемент в CSS, потому что некоторые браузеры отображают нежелательные пробелы.Теперь, когда у нас есть разметка SVG, мы можем перейти к ее использованию с тегом
<use>
:Здесь мы дадим ему общий класс блочного уровня и модификатор. Внутри тега
<use>
мы ссылаемся на наш символ, вызывая егоid
.Каждый раз, когда вы хотите использовать этот значок, вы просто вставляете этот фрагмент кода.
СТИЛЬ:
Помните классы, которые мы определили ранее в нашем
<svg>
?Это поможет нам стилизовать наш элемент.
И мы просто прячем наш лист спрайтов.
И готово!
ФРАГМЕНТ КОДА:
Подробнее об этой технике здесь .
Конечно, это можно сделать с изображениями PNG, применив свойство фильтра к классу, как фильтр работает в соответствии с консорциумом: «Эффект фильтра — это графическая операция, которая применяется к элементу, когда он рисуется в документе. это эффект на основе изображения, в котором берется ноль или более входных изображений, (применяется) набор параметров, характерных для эффекта, а затем выводится (результат) изображение».
Теперь я покажу вам пример кода в качестве руководства:
Фактически, он накладывает тень на изображение png, с непрозрачностью вы придаете прозрачность рассматриваемому объекту png, чтобы он мог принимать цвет, который вы ему назначаете, при наведении вы просто меняете его на нужный цвет, это половинчатое решение, но все еще функциональное, надеюсь, оно вам поможет, если у вас есть сомнения, не стесняйтесь спрашивать, привет.
В этом примере вы не можете, так как это png! проще всего было бы создать звезду с помощью CSS/CSS3
Если вы предпочитаете не тратить свое время впустую, у вас есть такие шрифты, как FontAwesome, которые упрощают все, тогда вы просто меняете цвет с помощью css.
http://fontawesome.io/icon/star/
Вы можете изменить фильтр и насыщенность изображения, например: