Css 修改图标颜色_Css 修改图片颜色_Css控制图片颜色

一、Css3 mask 修改图标颜色 （推荐）

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
        }

        .colorimg {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: blue;
            background-size: 100%;
            -webkit-mask: url(../../img/index.png) no-repeat;
            -webkit-mask-size: 100% 100%;
            mask: url(img/snowflake.png) no-repeat;
            mask-size: 100% 100%;
        }
    </style>
</head>

<body>
    <h1>原图</h1>
    <img src="../../img/index.png" alt="">

    <h1>变成指定颜色</h1>
    <span class="colorimg"></span>
</body>

</html>

展示效果：

 


二、Css3 滤镜 drop-shadow

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
        }

        .wrap {
            width: 100px;
            height: 100px;
            overflow: hidden;
        }

        .wrap img {
            width: 100px;
            height: 100px;
            position: relative;
            left: -100px;
            border-right: 100px solid transparent;
            filter: drop-shadow(100px 0px 0 blue);
        }
    </style>
</head>

<body>
    <h1>原图</h1>
    <img src="../../img/index.png" alt="">

    <h1>变成指定颜色</h1>
    <div class="wrap">
        <img src="../../img/index.png" alt="">
    </div>
</body>

</html>

效果：

 

三、css background-blend-mode

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
        }

        .colorimg {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: url(../../img/indexblack.png) no-repeat, blue;
            background-size: cover;
            background-blend-mode: lighten;
        }
    </style>
</head>

<body>

    <h1>原图</h1>
    <img src="../../img/index.png" alt="">
    <h1>变成指定颜色</h1>
    <span class="colorimg"></span>
</body>

</html>

效果：

 

更多：

CSS3 filter(滤镜) 属性使用整理

 Css3 将网页变成黑白_Css3 网页黑白滤镜filter

Css Transition height auto过渡效果问题整理

posted @ 2023-09-08 11:15  天马3798  阅读(506)  评论(0)  编辑  收藏  举报