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>

效果

 

posted @ 2020-04-17 16:11  雪旭  阅读(7033)  评论(0)  编辑  收藏  举报