CSS教程：图片使用混合模式和颜色叠加filter滤镜，改变PNG图标颜色

栏目: IT技术 · 发布时间: 4年前

内容简介：目前很多网站使用PNG来做图标，那么能否通过CSS更改其颜色？从而适应不同的网站风格？原始图片：

目前很多网站使用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;
}

CSS教程：图片使用混合模式和颜色叠加filter滤镜，改变PNG图标颜色

原始图片： CSS教程：图片使用混合模式和颜色叠加filter滤镜，改变PNG图标颜色

在线示例： 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">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="grayscale">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="contrast">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="brightness">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="blur">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="invert">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="sepia">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="huerotate">
<img alt="Mona Lisa" src="/file/view/ourjs/image/css-png-color-0.png" title="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>

效果

效果如下，其实更多时侯，我们可能只是需要灰度或彩色模式。鼠标悬浮可看到应用的filter属性。

CSS教程：图片使用混合模式和颜色叠加filter滤镜，改变PNG图标颜色

参考：

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

技术赋权

郑永年 / 邱道隆 / 东方出版社 / 2014-4-1 / CNY 45.00

在本书中，作者对中国互联网的历史做了一次突破性的研究，细致又全面地观察了中国互联网对于国家和社会的影响，发现互联网给中国的社会—政治变革带来了新的动力。政府权力和社会力量在以互联网为媒介的公共领域中转换。从大量的数据梳理和事实分析中，作者得出了四重的研究结论。首先，互联网给政府和社会都增加了权力。互联网在促进政治自由化中扮演了重要的角色，使政府更加开放、透明和负责任。第二，互联网产生了大量......一起来看看《技术赋权》这本书的介绍吧!

码农工具