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

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

微信力量

谢晓萍等著 / 机械工业出版社华章公司 / 2015-10-28 / 59.00

微信俨然已进化为一种万能的连接器，拥有连接一切的能力，彰显出强大的连接力，无处不在，无所不能。本书将为你讲述连接为何能产生如此巨大的力量，这股力量正在商业和民生领域产生的变化，将为你展现微信生态进化的全景世界。连接即入口，微信上的每一次有效的连接都会形成有效的入口。本书详细讲解了如何通过微信帮助餐饮、酒店、医院、零售、商场、电气、母婴、航空、客运、停车场、商圈、城市服务等数十个传统行业与它......一起来看看《微信力量》这本书的介绍吧!

码农工具