1. filter: drop-shadow(). Set the shadow of the picture
<div class="img_box"><img /></div>
//css style
.img_box {
width: 53px;
height: 53px;
overflow: hidden;
position: relative;
}
. img {
position: absolute;
width: 53px;
height: 53px;
filter: drop-shadow(70px 0 0 #EA5E30) // key
}
Two.background-blend-mode background blending mode
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}
The effect is as follows:
Gradient effects can also be achieved
.pic1 {
background-image: url($img), linear-gradient(#f00, #00f);
background-blend-mode: lighten;
background-size: cover;
}
The effect is as follows:
Two.svg method
<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
<style>
.icon2{
fill: #f61f41;
}
</style>
