css filter改变图片的颜色，神奇的操作~

2024-05-09 23:13:11

最近get了一个神奇的知识~

视觉设计的小姐姐某天有一个想法，她只设计一版图标，需要前端在不同的场景展示不同颜色的图标，确实是高效的办法哈！但是对我的CSS知识来说超纲了[捂脸]…于是开始搜搜搜，发现了一些办法，而且这些办法都是使用filter这个神奇的属性！

一、filter:drop-shadow

drop-shadow滤镜可以给元素或图片非透明区域添加投影，对于背景透明的icon来说，投影当然就可以实现改颜色啦！

html:

<div class="imgBox"><img src="xxxx" alt="" />
</div>

css:

.imgBox {width: 32px;height: 32px;overflow: hidden;img {width: 32px;height: 32px;transform: translateY(-32px);filter: drop-shadow(#EFE2DA0 0 32px);}
}

代码很简单：

1.filter: drop-shadow(投影颜色，x偏移量，y偏移量)；

这是filter: drop-shadow(#FF0000 0 32px)的效果，上面是原图，下面是投影

2.需要注意的就是需要设置容器overflow: hidden和元素本身transform: translateY(-64px)，只展示投影；

二、filter其他的属性

解决方案：https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/

这篇帖子里的最后一种方法对于想要实现图片变成指定颜色是比较适用的：

但是这个写法确实是不太容易理解原理，哈哈。不过文章中给出了工具可以计算出颜色代码对应的矩阵，还是很好用的！不过这个办法有一个限制，就是原图片必须是白色或者黑色的，工具计算出来的矩阵才能实现预期的颜色。

css filter改变图片的颜色，神奇的操作~相关推荐

html怎么改变图片亮度,纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
html如何加深图片,css怎么改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面就来说说怎么用简单的css改变图片的颜色. 熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix- ...
两行 CSS 代码实现图片任意颜色赋色技术
很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于 PNG 图片. mix-b ...
html 图片怎么改颜色代码,两行 CSS 代码实现图片任意颜色赋色技术
原标题:两行 CSS 代码实现图片任意颜色赋色技术 || 很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方 ...
html怎么改变图片整体大小,css怎么改变图片大小？
css怎么改变图片大小?下面本篇文章就来给大家介绍一下使用css改变图片大小的方法,希望对大家有所帮助. 在HTML页面中,图片的显示方法有两种,分别为:img图片,background(背景)图片. ...
iOS开发-改变图片的颜色
在日常开发中有一个小技巧来改变图片颜色,很是方便,比如UI一开始给你的图片颜色是白色,后面要换成蓝色,这时候,你懒的再去弄一张一摸一样只是颜色不一样的图片加进来,这时候这个小技巧就起到了作用,找UI切 ...
css显示内容越来越模糊_纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色.或者是hover的时候,对图片的对比度, ...
纯css svg 改变图片颜色 ios android 小程序
本文出自: http://blog.csdn.net/wyk304443164 使用的是 filter drop-shadow 如果你只想兼容 Chrome 那么请看: http://www.zhan ...
css能更换图片颜色的,css改变图片的颜色
js小时分钟控件-- 直接上代码: var str = ""; document.writeln(" 新增了个job https://112.124.41.113/svn ...

最新文章

热门文章