drop-shadow() 设置图片的阴影


使用 CSS3 滤镜filter中的drop-shadow实现纯色图标active切换颜色

drop-shadow(offset-x offset-y blur-radius spread-radius color)

具体语法参考：MDN

实现代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                width: 40px;
                height: 40px;
                border: 1px solid red;
                margin: 200px auto;
                text-indent: -40px;
                overflow: hidden;
            }
            .pic{
                filter: drop-shadow(40px 0px yellow); // 如果想换成其他颜色，直接更改最后一个参数
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/delete.png" class="pic"/>
        </div>
    </body>
</html>


background-blend-mode 背景的混合模式


.pic1 {
    background-image: url($img), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}


渐变的效果

.pic1 {
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    background-size: cover;
}


svg方法


<svg t="1653466467217" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" width="200" height="200"><path d="xxx"></path></svg>

<svg t="1653466467217" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" width="200" height="200"><path d="xxx"></path></svg>

<style>
.icon2{
  fill: #f61f41;
}
</style>


> 参考：
>
> 教你如何用CSS修改图片颜色
> CSS改变图片颜色的三种方法