如何更改圖像的背景色？

Question

我使用了名詞項目中的圖標。我需要同時更改背景顏色和顏色。（將背景顏色更改為“黑色”，將圖像顏色更改為白色。是否有CSS，或者需要photoshop我具有兩種.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

CSS3具有新的過濾器屬性，該屬性僅在webkit瀏覽器中有效

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

它翻轉顏色。

Answer 2

最簡單的方法是將img元素包裝在另一個元素中，例如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;
}