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

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

内容简介：目前很多网站使用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

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

查看所有标签

猜你喜欢:

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

码农书籍

大型网站技术架构演进与性能优化

许令波 / 电子工业出版社 / 2018-6 / 79

《大型网站技术架构演进与性能优化》从一名亲历者的角度，阐述了一个网站在业务量飞速发展的过程中所遇到的技术转型等各种问题及解决思路。从技术发展上看，网站经历了Web应用系统从分布式、无线多端、中台到国际化的改造；在解决大流量问题的方向上，涉及了从端的优化到管道到服务端甚至到基础环境优化的各个层面。《大型网站技术架构演进与性能优化》总结的宝贵经验教训可以帮助读者了解当网站遇到类似问题时，应如何......一起来看看《大型网站技术架构演进与性能优化》这本书的介绍吧!

码农工具