美文网首页
PNG格式小图标的CSS任意颜色赋色技术

PNG格式小图标的CSS任意颜色赋色技术

作者: 狂奔的蜗牛壳 | 来源:发表于2017-04-18 11:06 被阅读0次

    drop-shadow的属性为: (x偏移, y偏移, 模糊大小, 色值)
    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: -20px;
        border-right: 20px solid transparent;
        -webkit-filter: drop-shadow(20px 0);
        filter: drop-shadow(20px 0);    
    }
    

    HTML代码

    <p><strong>原始图标</strong></p>
    <i class="icon icon-del"></i>
    <p><strong>可以变色的图标</strong></p>
    <i class="icon"><i class="icon icon-del"></i></i>
    

    相关文章

      网友评论

          本文标题:PNG格式小图标的CSS任意颜色赋色技术

          本文链接:https://www.haomeiwen.com/subject/rjsfzttx.html