Как изменить цвет фона?

Question

Я использовал значок из проекта-существительного. Мне нужно также изменить цвет фона и его цвет (измените цвет фона на «черный» и измените цвет изображения на белый. Есть ли там css. фотошоп у меня есть изображение в двух формате .SVG и .png

значок расположение: http://thenounproject.com/term/meditation/29971/

закодированы как:

<img src="/assets/new_home/images/short_desc_icon_yoga.png" height="25px;" width="25px">     <hr/> 

Answer 1

Самый простой способ сделать это, чтобы обернуть элемент IMG в другой , например a span:

<span class="imgWrap"> 
<img src="/assets/new_home/images/short_desc_icon_yoga.png" height="25px;" width="25px"> 
</span> 

И добавить CSS:

.imgWrap { 
display: inline-block; 
border: 1px solid #000; 
} 

.imgWrap:hover { 
background-color: #000; 
} 

Answer 2

CSS3 имеет новый атрибут фильтра, который будет работать только в WebKit браузерах

img { 
    background: #FFF; 
    -webkit-filter: invert(100%); 
} 

Это флип цвета.

Answer 3

Чтобы изменить цвет изображения, вы можете использовать фильтр hue-rotate. Он сдвигает цвета на указанное количество (в градусах). Используйте цветовое колесо, чтобы определить, какое количество вращений даст вам желаемый результат.

img { 
 
    background-color: #EEE; 
 
} 
 
img:hover { 
 
    background-color: #FFF; 
 
     -webkit-filter: hue-rotate(90deg); 
 
       filter: hue-rotate(90deg); 
 
}

<img src="//code.jquery.com/ui/1.9.2/themes/cupertino/images/ui-icons_72a7cf_256x240.png">

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