技巧分享：如何利用CSS属性修改图片颜色？

熟悉前端开发的小伙伴肯定有遇到过这种情况，那就是需要给一个图标或者图片增加一个移动变色等属性，传统做法就是再添加一个颜色的图片文件替换，那么有没有可能直接利用css属性来变更颜色呢？

其实是可以实现的，不过图片的一些细节会无法保存，只能用户一些比较简单的不需要细节的图片，同学们请根据实际情况选择使用哈。

原理嘛，其实很简单的，用到的就是 CSS3 滤镜filter中的drop-shadow，该滤镜可以给图片非透明区域添加投影。你可以理解为下图

它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。是有一点类似box-shadow，但是二者还是有显著差别的。

先来看一下语法：

filter:drop-shadow(水平阴影偏移距离垂直阴影偏移距离投射的阴影颜色 );

我们准备一张背景色是透明的图片(图片尺寸40px X 40px)，

用一个div将该图片包裹住，给图片添加filter: drop-shadow(40px 40px yellow) 这段代码，代表投射出一个和该图片一样的形状。

三个参数分别代表：

水平向右移动40px，垂直向下移动40px，投射出的形状颜色为黄色。

效果为

接下来我们稍微更改一下原代码，将原图设置在div外部并隐藏，变色后的投影放置在div

如果想换成其他颜色，直接更改第三个参数就Ok了~是不是很简单！

本文来自千锋教育，转载请注明出处。

技巧分享：如何利用CSS属性修改图片颜色？相关推荐

前端技巧|利用CSS属性修改图片颜色
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...
python 修改文件名_【学习分享】利用python批量修改文件名
1 前言分享一个利用python批量修改文件名的方法,我们以前分享过用DOS命令来批量修改文件名,但是如果要修改多个文件夹内的文件名,用DOS命令就不好处理了,我们就来分享一下如何用python处理 ...
html修改img图片颜色,教你如何用CSS修改图片颜色
原标题:教你如何用CSS修改图片颜色看到题目是不是吓了一跳?css竟然还有这个操作?还真是第一次听说~ 原理嘛,其实很简单的,用到的就是 CSS3 滤镜filter中的drop-shadow,该滤镜 ...
iOS 修改图片颜色
iOS小菜一碟:1:用代码修改图片颜色首先需要是Xcode的assets里面的图片选中图片 DraggedImage-1.png 在属性面板里可以看到Render As,选择Template Im ...
JTOPO 修改图片颜色
其实JTOTO中报警的处理是通过设置:alarm.alarmColor和setImage(url)来实现的. alarm属性不为null表示有节点报警: alarmColor属性设置报警时图片的颜色. ...
html怎么改变图片亮度,纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
PS CC 2015 修改图片颜色和大小
为什么修改图片颜色? [预期:]设计师给的设计稿两种颜色的图片,图片尺寸要求是48x48像素,一张绿色,一张白色. [实际]绿色图片符合要求,白色图片是40x40像素,偏小.测试妹子不干了!!! [解 ...
【HTML5】Web前端——网页实用技巧1：将一个方形图片，变成圆形（利用CSS属性）
需要效果:将原本是长方形.正方形的图片,变成一个圆形图片这样的好处:不需要对图片进行特别的处理,直接使用实现思路: ①制作一个方形div盒子,将图片放在div盒子里 ②将盒子设置成圆形(利用 bo ...
图标选择器_【小技巧】巧用CSS属性值正则匹配选择器
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...

技巧分享：如何利用CSS属性修改图片颜色？

技巧分享：如何利用CSS属性修改图片颜色？相关推荐

最新文章

热门文章