前端技巧|利用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了~是不是很简单

想要学习web前端的同学，可以参考千锋成都web前端培训班提供的学习大纲；

前端技巧|利用CSS属性修改图片颜色相关推荐

技巧分享：如何利用CSS属性修改图片颜色？
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...
html怎么改变图片亮度,纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
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属性设置报警时图片的颜色. ...
PS CC 2015 修改图片颜色和大小
为什么修改图片颜色? [预期:]设计师给的设计稿两种颜色的图片,图片尺寸要求是48x48像素,一张绿色,一张白色. [实际]绿色图片符合要求,白色图片是40x40像素,偏小.测试妹子不干了!!! [解 ...
【HTML5】Web前端——网页实用技巧1：将一个方形图片，变成圆形（利用CSS属性）
需要效果:将原本是长方形.正方形的图片,变成一个圆形图片这样的好处:不需要对图片进行特别的处理,直接使用实现思路: ①制作一个方形div盒子,将图片放在div盒子里 ②将盒子设置成圆形(利用 bo ...
自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
Photoshop简单案例（8）——利用文字工具修改图片上文字
目录一.项目介绍二.原图上有要替换的文字 2.1 方法1--利用修补工具修改 2.2 方法2--利用移动工具(推荐) 2.3 效果演示三.原图上没有要替换的文字一.项目介绍本文介绍利用Pho ...

前端技巧|利用CSS属性修改图片颜色

前端技巧|利用CSS属性修改图片颜色相关推荐

最新文章

热门文章