zoukankan      html  css  js  c++  java
  • css改变图标颜色

    一、CSS3 mask

    CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示,透明区域隐藏。因此,我们只需要把目标图标颜色#f4615c作为背景色,然后原始图标(无论什么颜色都可以)作为遮罩图片,效果就出来了。

    效果:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                
    
                img {
                    width: 60px;
                    height: 60px;
                }
    
                .colorful {
                    display: inline-block;
                    width: 60px;
                    height: 60px;
                    background: linear-gradient(to right, red, yellow, green);
                    background-size: 80%;                
                    -webkit-mask: url(img/snowflake.png) no-repeat;
                    -webkit-mask-size: 100% 100%;
                    mask: url(img/snowflake.png) no-repeat;
                    mask-size: 100% 100%;
                }
            </style>
        </head>
        <body>
    
            <h4>原图</h4>
            <p><img src="img/snowflake.png"></p>
            <h4>变成指定红色</h4>
            <p><span class="colorful"></span></p>
        </body>
    </html>

    效果图片

    二、css background-blend-mode

    此方法图片必须是黑图白底,如果是彩色的,颜色会混淆在一起;其次非图形部分必须是白色,不能是透明,因为透明会被当做黑色处理。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                img {
                    width: 60px;
                    height: 60px;
                }
                
                .colorful {
                    display: inline-block;
                    width: 60px;
                    height: 60px;
                    background:url(img/snowflake1.jpg) no-repeat, linear-gradient(to right, red, yellow, green) ;
                    background-size:cover;
                    background-blend-mode: lighten;
    
                }
            </style>
        </head>
        <body>
            <h4>原图</h4>
            <p><img src="img/snowflake.png"></p>
            <h4>变成指定红色</h4>
            <p><span class="colorful"></span></p>
        </body>
    </html>

    效果

     三、css滤镜drop-shadow

    使用了CSS3滤镜filter中的drop-shadow(drop-shadow滤镜可以给元素或图片非透明区域添加投影)。用drop-shadow添加投影模糊度为0,再隐藏原图片。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .wrap {
                    width: 60px;
                    height: 60px;
                    overflow: hidden;
                }
    
                img {
                    width: 60px;
                    height: 60px;
                    position: relative;
                    left: -60px;
                    /*在Chrome浏览器下(低版本),如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其drop-shadow是不可见的;实体部分哪怕有1像素可见,则drop-shadow完全可见。*/
                    border-right: 60px solid transparent;
                    filter: drop-shadow(60px 0px 0 red);
                }
    
    
            </style>
        </head>
        <body>
            <div class="wrap">
                <img src="img/snowflake.png" alt="">
            </div>
            
        </body>
    </html>

    效果

  • 相关阅读:
    京东咚咚架构演讲读后感
    京东峰值系统设计读后感
    游戏服务器的架构演讲读后感
    菜鸟弹性调度系统的架构设计读后感
    阿里如何实现秒级百万TPS?搜索离线大数据平台架构解读读后感
    阿里游戏高可用架构设计实践读后感
    淘宝架构背后——零售业务中台架构设计探讨及实践读后感
    本地存储的时候需要类型转换
    禁止输入框显示用户历史输入历史记录
    项目必备!永无 bug 注释
  • 原文地址:https://www.cnblogs.com/zimengxiyu/p/12720109.html
Copyright © 2011-2022 走看看