png图片制作任意颜色的小图标
本内容只要是对张鑫旭PNG格式小图标的CSS任意颜色赋色技术的这篇文章进行详细说明。
HTML:
<i class="icon"><i class="icon icon-del"></i></i>
CSS:
.icon{
display: inline-block;
width: 20px;
height: 20px;
overflow: hidden;
}
.icon-del{
background:url(delete.png) no-repeat center;
}
.icon>.icon{
position:relative;
left:-100%;
border-right: 20px solid transparent;
-webkit-filter: drop-shadow(blue 20px 0);
filter: drop-shadow(blue 20px 0);
}
效果:
当然还可以弄成其他颜色,只需要改变一下filter: drop-shadow(blue 20px 0); 里面的blue这个颜色。
这个原理就是利用filter过滤器的drop-shadow投影,也就是生成一个新的图标,然后我们给这个新图标添加颜色。
我们给父元素设置宽和高以及overflow:hidden,然后让这个子元素正常的图片left:100%让它隐藏,再通过border-right来设置一个宽度为图片宽度的transparent透明边框,最后给它加投影就好了。
png图片制作任意颜色的小图标的更多相关文章
- reactjs 项目使用 iconfont 小图标以及使用带颜色 inconfont 小图标
在 reactjs 项目中是所有小图标目前主要分为两类使用方式,第一类通过 CSS 引入的方式使用,第二类使用 JS 的方式引入使用. 注册-登录-建立项目-选中图标添加到购物车-添加至项目-下载到本 ...
- 不会PS如何自制简单线条、任意填充色的小图标
最近在做H5的开发中,需要用到一些简单的小图标,百度出来的图片,总是或多或少差了一些颜色.于是准备自己制作图片,PS是不会的,学习以及软件安装太费时,于是就准备用常见的软件来试着做一做. 在尝试了 w ...
- fontAwesome代替网页icon小图标
引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...
- iconfont字体图标和各种CSS小图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- CSS之fontAwesome代替网页icon小图标
引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...
- CDR快速制作苹果手机照片小图标
本篇教程用CorelDRAW快速制作苹果手机照片小图标,在实现的过程中主要使用了旋转复制的方法,加之一些常用工具的用法处理,最后加上透明效果下的合并模式就好了,现在跟小编一起来看看详细的操作吧! 1. ...
- css 小图标 & iconfont 字体图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- 把UI图里的小图标制作成icon font
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
随机推荐
- CodeBlock 使用TextOut出错
undefined reference to `TextOutA@20'C:\Program Files (x86)\CodeBlocks\MinGW\lib这次需要的库是:libgdi32.a 1. ...
- ofbiz 代码日记
写代码一定要尽善尽美.. //修改方法 //条件查询 用于修改 List<GenericValue> stoList = delegator.findByAnd("YcrossS ...
- Ubuntu下使用USB串口
Ubuntu本身一般都带了USB转串口的驱动. 1. 首先确认系统支持USBSerial,输入以下命令: lsmod | grep usbserial 2. 接上USB串口线,看看系统是否可 ...
- NGUI 3.0.7的新锚点系统设置不好就会造成显示错误的错觉
每次设置NGUI控件的锚点时,都需要刷新一下窗口,不然就会造成显示错误的错觉. 同时,NGUI控件设置锚点的参考对象为一个物体时还需要调整其控件大小,不然也会造成显示错误的错觉.
- android wifi SWOL低功耗模式
1 睡眠模式RX代码流程 ar_wal_rx_patch.c::patch_rx_process_recv_status//调用rx_ctxt->data_ind_handler -> d ...
- 回调函数(callback)
参考维基百科链接: 中文:http://zh.wikipedia.org/wiki/%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0 英文:http://en.wikipedi ...
- node.js初学遇到的问题
是用express安装一个网站基础架构时 express -t ejs microblog 但是出来的模板引擎是jade,通过修改js也修改模板引用npm install 等等修改了index.ejs ...
- centos 6.5 中设置mysql 5.1.73 主从同步配置过程
本文章给大家介绍centos 6.5设置mysql主从同步过程记录,希望文章对各位会带来帮助. 涉及到的centos系统均为虚拟机,VM下安装的版本. 在centos 6.5上设置了mysql主从功 ...
- Spring中Ordered接口简介
目录 前言 Ordered接口介绍 Ordered接口在Spring中的使用 总结 前言 Spring中提供了一个Ordered接口.Ordered接口,顾名思义,就是用来排序的. Spring是一个 ...
- 使用decode函数实现统计
从上个星期起就在开始做统计图,各种统计图,昨天做的统计效果图如下: 在这里要根据工作平台和机构做统计,其中当字段A等于某个值时需要统计起来,也就是说假设等于2时需要做统计,字段 ...