CSS改变图片颜色的三种方法

本文介绍: filter: drop–shadow(70px 0 0 #EA5E30) //关键。一.filter: drop–shadow(). 设置图片的阴影。二.background–ble nd–mode 背景的混合模式。也可以实现渐变的效果。

一.filter: drop–sha do w(). 设置图片的阴影

<div class=”img _box“&g t;<img /&g t;</div&g t;

//css 样式

.i m g _box {

width: 53p x;

height: 53px;

overflow: hidden;

position: relative;

}

. i m g {

position: a bs olut e;

width: 53px;

height: 53px;

filter: drop–sha do w(70px 0 0 #EA5E30) //关键

}

二.background–ble nd–mode 背景的混合模式

.pi c1 {

background–image: url($i m g), linear–gradient(#f00, #f00);

background–ble nd–mod e: light e n;

background–size: c ov e r;

}

效果如下：

也可以实现渐变的效果

.pic1 {

background–image: url($i mg), linear–gradient(#f00, #00f);

backgroun d–ble n d–mode: lighten;

backgr ound–size: c over;

}

效果如下：

二.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″ w id th=”200″ height=”200″><path d=”xxx“></path></svg>

//css 样式

<style>

.icon2{

fill: #f61f41;

}

</style>