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

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

查看所有标签

猜你喜欢:

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

码农书籍

Web Development Recipes

Brian P. Hogan、Chris Warren、Mike Weber、Chris Johnson、Aaron Godin / Pragmatic Bookshelf / 2012-1-22 / USD 35.00

You'll see a full spectrum of cutting-edge web development techniques, from UI and eye candy recipes to solutions for data analysis, testing, and web hosting. Make buttons and content stand out with s......一起来看看《Web Development Recipes》这本书的介绍吧!

码农工具