CSS教程：圖片使用混合模式和顏色疊加filter濾鏡，改變PNG圖標顏色

目前很多網站使用PNG來做圖標，那麼能否通過CSS更改其顏色？從而適應不同的網站風格？

混合模式

css3添加了兩個與混合模式相關的屬性： mix-blend-mode，background-blend-mode

這種方法的基本原理是將圖片和背景顏色混合，從而變成新的顏色。

CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。大致和ps中一致：

normal; // 正常

multiply; // 正片疊底

screen; // 濾色

overlay; // 疊加

darken; // 變暗

lighten; // 變亮

color-dodge; // 顏色減淡

color-burn; // 顏色加深

hard-light; // 強光

soft-light; // 柔光

difference; // 差值

exclusion; // 排除

hue; // 色相

saturation; // 飽和度

color; // 顏色

luminosity; // 亮度

混合模式缺陷

當圖標背景是透明的PNG圖片時，底色會顯示出來，而我們其實只想改變圖標有顏色的部分。

#div {
    width: 300px;
    height: 300px;
    background: url(/file/view/ourjs/image/css-png-color-0.png) #f00;
    background-blend-mode: lighten;
}

原始圖片：

在線示例： https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-blend-mod

filter過濾

blend-mode和瀏覽器兼容和實際效果其實並不好，此時可使用更加強大的filter，一行CSS就可改造圖片顏色的色相、飽和度、對比度等，原理類似PS中的濾鏡。

<p id="demo">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="original">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="saturate" class="saturate">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="contrast" class="contrast">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="brightness" class="brightness">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="blur" class="blur">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="invert" class="invert">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="sepia" class="sepia">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="opacity" class="rss opacity"></p>
  
<style>
#demo img {
    width:20%;
    float:left; 
    margin:0;
}

/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
</style>