首页 > 分享 > 正文

用css改变png图片的颜色
2018-10-08 11:05:57   来源:灰灰   评论:0 点击:

html<div class="icon"> <span class=& 39;icon& 39; id=& 39;icon& 39;>< span> < div>
html
<div class="icon">
            <span class='icon' id='icon'></span>
        </div>
        <input type="color" id='color' />

上面父div是用来影藏其图片真实面目的,子span #icon是图片滤镜显示

css

div.icon{height:20px;width:20px;overflow: hidden;}
            .icon .icon{width: 20px;height: 20px;display:block;position: relative;left: -20px;border-right: 20px solid transparent;
                background: url(img/icon.png) no-repeat;-webkit-filter: drop-shadow(#000 20px 0);filter: drop-shadow(#000 20px 0);   
            }

可以调整父div的大小和子span的left值来对应刚好的位置

JS

document.getElementById('color').onchange = function(){
            var c = this.value;
            document.getElementById('icon').style.webkitFilter = 'drop-shadow('+c+' 20px 0)';
        }

在谷歌,火狐,各种手机端都支持此类属性!

相关热词搜索:颜色 图片

上一篇:PHP怎么验证邮箱格式是否正确?
下一篇:为什么选择使用Go语言?

分享到: 收藏
这里空拉拉的一点都不好看,我加个这个盒子可能会好看些,只是可能啊!我觉得......
看了下还是不好看,那再加一个......
看了下还是不好看,以后在这价格留言功能什么的可能会好些......