用drop-shadow实现SVG（改变png图片颜色）

I

<div class="wrap">

  <img class="icon" src="$%@" height="240" width="240"/>

</div>

1.包裹层.wrap的overflow:hidden

2.设置.icon样式

  position:relative;

  left:-240px;

  border-right:240px solid transparent;

  -webkit-filter:drop-shadow(240px 0 #900);

  filter:drop-shadow(240px 0 #900);


II

如此，改变#900，即可改变图片中PNG的颜色了，仿佛使用SVG一般方便

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 实用的60个CSS代码片段
    1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，...
    kiddings阅读 3,200评论 0赞 11
  • css 填坑代码
    以下是常用的代码收集，学习用。转自[豪情博客园] (http://www.cnblogs.com/jikey/p/...
    自由加咖啡阅读 1,101评论 0赞 1
  • 默沫墨的日记2
    它白天的频率就是睡完吃，吃完睡，而且我家小公子有双迷人的丹凤眼(其实就是懒的睁眼吃东西)，然后网上他起来嗨时，我已...
    佳小佳阅读 246评论 0赞 0
  • 琴瑟在御，莫不静好
    你在思念里眉眼带笑，我在想你的日子里变得苍老 泛黄的书页微微卷起书角，多想回到小时候那是我还没有烦恼 时光老去忘不...
    鹿鸣雪阅读 389评论 1赞 4
  • 钱愁
    刚解前恨，又生后忧。 奈何人间杂事多纷扰， 无论欢喜，还是忧， 皆一个“钱”子了得！
    烟雨谜尘阅读 273评论 0赞 0