一.filter: drop-shadow(). 设置图片的阴影

<div class="img_box"><img /></div>

//css样式

.img_box {

  width: 53px;

  height: 53px;

  overflow: hidden;

  position: relative;

}

. img {

  position: absolute;

  width: 53px;

  height: 53px;

  filter: drop-shadow(70px 0 0 #EA5E30)      //关键

}

 二.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>

//css样式

<style>

.icon2{

  fill: #f61f41;

}

</style>