A-A+

CSS改变任意PNG格式图片颜色

2016年07月14日 代码 暂无评论 阅读 6,247 次
摘要:

使用CSS来改变任意PNG格式图片的颜色,避免了不同颜色就需要不同图片文件的尴尬,直接使用CSS来改变颜色节省空间方便后期更改

一、眼见为实

CSS可以修改PNG透明图片的颜色,如图

代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS改变任意PNG格式图片颜色</title>
  6.     <style>
  7.         .div-1{
  8.             margin20px auto;
  9.             width300px;
  10.             background-color#FFFFFF;
  11.             box-shadow: 0 0 20px #000000;
  12.             overflowhidden;
  13.         }
  14.         .div-2{
  15.             width250px;
  16.             height250px;
  17.             border-left5px solid #2FAFFC;
  18.             floatrightright;
  19.             overflowhidden;
  20.         }
  21.         .img-1{
  22.             backgroundurl(http://dcoet.com/wailian/data/f_38358156.png) no-repeat;
  23.             width32px;
  24.             height32px;
  25.             displayinline-block;
  26.         }
  27.         .img-2{
  28.             positionrelative;
  29.             left: -32px;
  30.             border-right32px solid transparent;
  31.             -webkit-filter:drop-shadow(32px 0 #FF0000);
  32.             filter:drop-shadow(32px 0 #FF0000);
  33.             }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="div-1">
  38.         <div class="div-2">
  39.         <h4>原始图标</h4>
  40.         <i class="img-1"></i>
  41.         <hr>
  42.         <h4>变色后的图标</h4>
  43.         <i class="img-1 img-2"></i>
  44.         </div>
  45.     </div>
  46. </body>
  47. </html>

二、实现原理

原理其实很简单,使用了CSS3滤镜filter中的drop-shadow,可以给元素或图片添加投影。关于filter特效可以查看CSS3 Filter的十种特效

filter: drop-shadow(x轴 y轴 投影大小 颜色);。FireFox浏览器可直接使用filter,但Chrome浏览器必需是-webkit-filter,使用的时候设置两个值如上面贴出来的代码那样

对于背景透明的png小图标而言,如果我们施加一个不带模糊的投影(将投影大小设为0),不就等同于生成了另外一个颜色的小图标了吗?

然后,我们把原始图标隐藏在容器外面overflow:hidden,投影图标在容器中间,给人感觉不就是赋色效果了?

三、实现的时候实际有难度

原理如上面,我一开始实现的时候,以为很简单,因为分分钟可以实现自己的想法,后来发现有些天真了,Chrome浏览器怎么都显示不出来;FireFox浏览器却可以!咦,究竟发生了什么。

在Chrome浏览器下,drop-shadow有一个如下的呈现特性:

在Chrome浏览器下,如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其drop-shadow是不可见的;实体部分哪怕有1像素可见,则drop-shadow完全可见。

所以,我试过:

  • text-indent负值隐藏原始图,无投影,失败!
  • clip剪裁隐藏,无投影,失败!
  • margin负值隐藏原始图,无投影,失败!
  • left负值隐藏原始图,无投影,失败!

通通不行,实现遇到了巨大的阻碍。

后来,灵光一现,如果我实体部分也在可视区域内,但是是透明的,会怎样呢(反正不会有投影出来)?

于是,我就试了下曾经立下无数战功的透明边框,卧槽,又立功了,成了!

因此,下面这一个CSS声明是千万不能少的:

border-right: 20px solid transparent;  //20px根据图标大小设定

关于兼容性

IE13+支持,Chrome和FireFox浏览器支持,移动端iOS支持,Android4.4+支持。也就是,基本上,移动端现在可以使用这种技术了。

既节约了流量,也让我们的开发更简单,维护更方便了。

内容来于网络

给我留言

Copyright © 老疯子 保留所有权利.  

用户登录

分享到: