目前很多網站使用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

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中的濾鏡。

#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%); }

效果

效果如下，其實更多時侯，我們可能只是需要灰度或彩色模式。鼠標懸浮可看到應用的filter屬性。

參考：

https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css

總結

以上是生活随笔為你收集整理的html图片颜色加深,CSS教程：图片使用混合模式和颜色叠加filter滤镜，改变PNG图标颜色...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。