Css 修改圖標顏色_Css 修改圖片顏色_Css控制圖片顏色

原創

2023-09-08 14:00

一、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>