目前很多網(wǎng)站使用PNG來做圖標(biāo)，那么能否通過CSS更改其顏色？ 從而適應(yīng)不同的網(wǎng)站風(fēng)格？

混合模式

css3添加了兩個(gè)與混合模式相關(guān)的屬性： mix-blend-mode，background-blend-mode

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

CSS 屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。大致和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; // 強(qiáng)光

soft-light; // 柔光

difference; // 差值

exclusion; // 排除

hue; // 色相

saturation; // 飽和度

color; // 顏色

luminosity; // 亮度

混合模式缺陷

當(dāng)圖標(biāo)背景是透明的PNG圖片時(shí)，底色會(huì)顯示出來，而我們其實(shí)只想改變圖標(biāo)有顏色的部分。#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和瀏覽器兼容和實(shí)際效果其實(shí)并不好，此時(shí)可使用更加強(qiáng)大的filter，一行CSS就可改造圖片顏色的色相、飽和度、對(duì)比度等，原理類似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%); }

效果

效果如下，其實(shí)更多時(shí)侯，我們可能只是需要灰度或彩色模式。鼠標(biāo)懸浮可看到應(yīng)用的filter屬性。

參考：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。