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

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

CSS改变图片颜色的三种方法相关推荐

利用CSS改变图片颜色的100种方法！
(给前端大全加星标,提升前端技能) 来源: 前端指南前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同 ...
html图片颜色变深,利用CSS改变图片颜色的100种方法！
前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色.或者是hover的时候, ...
c# pictureBox1.Image的获得图片路径的三种方法 winform
代码如下:c# pictureBox1.Image的获得图片路径的三种方法 winform 1.绝对路径: this.pictureBox2.Image=Image.FromFile("D: ...
javaScript改变this指向的三种方法
javaScript提供了一些函数方法帮助我们处理函数内部this的指向问题,常用的有bind().call().apply()三种方法 1.call() 方法调用一个对象.简单理解为调用函数的方式, ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
如何提高图片清晰度？三种方法来帮你！
如何提高图片清晰度?图片在上传到网络后会被压缩,导致图片变得模糊.今天,我将分享三种方法,帮助您提高图片的清晰度. 方法一:使用记灵在线工具工具地址:记灵在线工具 - 更专注于发现工具的实用性该工 ...
html中改变一张图片的颜色,简单的 css 改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面切图网教你,怎么用简单的css改变图片的颜色. 熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mi ...
cdr里怎么看html颜色代码大全,CDR中查看是RGB还是CMYK颜色的三种方法
使用CorelDRAW作出的文件在印刷的时候,要做印前检查,区别颜色模式,以保证能正常印刷效果.那么如何查看一个设计文件是RGB还是CMYK颜色,文本将介绍三种方法以做详细说明. 方法一:查找和替换 ...
cdr 颜色的html怎么查,CDR中查看是RGB还是CMYK颜色的三种方法
使用CorelDRAW作出的文件在印刷的时候,要做印前检查,区别颜色模式,以保证能正常印刷效果.那么如何查看一个设计文件是RGB还是CMYK颜色,文本将介绍三种方法以做详细说明. 方法一:查找和替换 ...

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

CSS改变图片颜色的三种方法相关推荐

最新文章

热门文章