本内容只要是对张鑫旭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图片制作任意颜色的小图标的更多相关文章

  1. reactjs 项目使用 iconfont 小图标以及使用带颜色 inconfont 小图标

    在 reactjs 项目中是所有小图标目前主要分为两类使用方式,第一类通过 CSS 引入的方式使用,第二类使用 JS 的方式引入使用. 注册-登录-建立项目-选中图标添加到购物车-添加至项目-下载到本 ...

  2. 不会PS如何自制简单线条、任意填充色的小图标

    最近在做H5的开发中,需要用到一些简单的小图标,百度出来的图片,总是或多或少差了一些颜色.于是准备自己制作图片,PS是不会的,学习以及软件安装太费时,于是就准备用常见的软件来试着做一做. 在尝试了 w ...

  3. fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  4. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  5. CSS之fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  6. CDR快速制作苹果手机照片小图标

    本篇教程用CorelDRAW快速制作苹果手机照片小图标,在实现的过程中主要使用了旋转复制的方法,加之一些常用工具的用法处理,最后加上透明效果下的合并模式就好了,现在跟小编一起来看看详细的操作吧! 1. ...

  7. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  8. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  9. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

随机推荐

  1. CodeBlock 使用TextOut出错

    undefined reference to `TextOutA@20'C:\Program Files (x86)\CodeBlocks\MinGW\lib这次需要的库是:libgdi32.a 1. ...

  2. ofbiz 代码日记

    写代码一定要尽善尽美.. //修改方法 //条件查询 用于修改 List<GenericValue> stoList = delegator.findByAnd("YcrossS ...

  3. Ubuntu下使用USB串口

    Ubuntu本身一般都带了USB转串口的驱动. 1. 首先确认系统支持USBSerial,输入以下命令:      lsmod | grep usbserial 2. 接上USB串口线,看看系统是否可 ...

  4. NGUI 3.0.7的新锚点系统设置不好就会造成显示错误的错觉

    每次设置NGUI控件的锚点时,都需要刷新一下窗口,不然就会造成显示错误的错觉. 同时,NGUI控件设置锚点的参考对象为一个物体时还需要调整其控件大小,不然也会造成显示错误的错觉.

  5. android wifi SWOL低功耗模式

    1 睡眠模式RX代码流程 ar_wal_rx_patch.c::patch_rx_process_recv_status//调用rx_ctxt->data_ind_handler -> d ...

  6. 回调函数(callback)

    参考维基百科链接: 中文:http://zh.wikipedia.org/wiki/%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0 英文:http://en.wikipedi ...

  7. node.js初学遇到的问题

    是用express安装一个网站基础架构时 express -t ejs microblog 但是出来的模板引擎是jade,通过修改js也修改模板引用npm install 等等修改了index.ejs ...

  8. centos 6.5 中设置mysql 5.1.73 主从同步配置过程

    本文章给大家介绍centos 6.5设置mysql主从同步过程记录,希望文章对各位会带来帮助.  涉及到的centos系统均为虚拟机,VM下安装的版本. 在centos 6.5上设置了mysql主从功 ...

  9. Spring中Ordered接口简介

    目录 前言 Ordered接口介绍 Ordered接口在Spring中的使用 总结 前言 Spring中提供了一个Ordered接口.Ordered接口,顾名思义,就是用来排序的. Spring是一个 ...

  10. 使用decode函数实现统计

          从上个星期起就在开始做统计图,各种统计图,昨天做的统计效果图如下:       在这里要根据工作平台和机构做统计,其中当字段A等于某个值时需要统计起来,也就是说假设等于2时需要做统计,字段 ...