🔺 一、眼见为实
CSS可以修改PNG透明图片的颜色,如图
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <title>CSS改变任意PNG格式图片颜色</title>
- <style>
- .div-1{
- margin: 20px auto;
- width: 300px;
- background-color: #FFFFFF;
- box-shadow: 0 0 20px #000000;
- overflow: hidden;
- }
- .div-2{
- width: 250px;
- height: 250px;
- border-left: 5px solid #2FAFFC;
- float: rightright;
- overflow: hidden;
- }
- .img-1{
- background: url(http://dcoet.com/wailian/data/f_38358156.png) no-repeat;
- width: 32px;
- height: 32px;
- display: inline-block;
- }
- .img-2{
- position: relative;
- left: -32px;
- border-right: 32px solid transparent;
- -webkit-filter:drop-shadow(32px 0 #FF0000);
- filter:drop-shadow(32px 0 #FF0000);
- }
- </style>
- </head>
- <body>
- <div class="div-1">
- <div class="div-2">
- <h4>原始图标</h4>
- <i class="img-1"></i>
- <hr>
- <h4>变色后的图标</h4>
- <i class="img-1 img-2"></i>
- </div>
- </div>
- </body>
- </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+支持。也就是,基本上,移动端现在可以使用这种技术了。
既节约了流量,也让我们的开发更简单,维护更方便了。
内容来于网络
非特殊说明,本博所有文章均为博主原创。
如若转载,请注明出处:http://dcoet.com/wordpress/1473.html
共有 0 条评论