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

最新推荐文章于 2024-07-25 14:15:14 发布
最新推荐文章于 2024-07-25 14:15:14 发布
阅读量1w 收藏 13
点赞数 1
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/and_life/article/details/130367986
版权
文章介绍了如何使用CSS的filter属性中的drop-shadow来设置图片阴影，以及background-blend-mode属性创建背景的混合模式，展示了lighten模式下的渐变效果。同时，提到了使用SVG进行图形渲染，并通过改变fill属性调整颜色。
摘要由CSDN通过智能技术生成

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

 

and_life
关注
html中改变一张图片的颜色,css怎么改变图片颜色
weixin_33241808的博客
06-03 4814
当我们在做项目的时候，经常有许多个icon 图片两个或更多个颜色的版本，下面就来说说怎么用简单的css改变图片的颜色。熟悉PS的人都应该知道混合模式，css3中也有两个与混合模式相关的属性，mix-blend-mode 和 background-blend-mode首先我们来了解一下mix-blend-mode 取值情况mix-blend-mode: normal; // 正常mix-blend-...
使用CSS改变图片颜色的100种方法(值得收藏)
12-13
前言 “说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。” 你以为这些是经过PS软件处理出来的？不不不，纯粹的是用css写出来的，很神奇把。 强大的 CSS:filter CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN CSS标准里包含了一些已实现预定义效果的函数。 filter: none | blur() | brightness()
css更改图片颜色
最新发布
程序员
07-25 689
这些滤镜组合在一起，可以产生独特的视觉效果，可能用于特定的设计需求或视觉效果。：将图像的颜色反转51%。即把图像的颜色变为它们的补色，反转比例为51%。css更改图片颜色，比较时候颜色单一的图片，比如logo之类的。：将图像转换为深褐色调，类似于旧照片效果，深褐色比例为94%。：增加图像的饱和度，使颜色更加鲜艳，饱和度为原来的6433%。：调整图像的亮度，使图像的亮度变为原来的93%。：调整图像的对比度，使对比度变为原来的101%。) 添加一系列的滤镜效果。：改变图像的色相，将色相顺时针旋转190度。
纯css实现更改图片颜色的技巧
01-21
css更改图片颜色的技巧 ，代码很简单，具体代码如下所示： tips： JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色 .pic1 { background-image: url($img), linear-gradient(#f00, #f00); background-blend-mode: lighten; background-size: cover; } 总结 以上所述是小编给大家介绍的纯css实现更改图片颜色的技巧  ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支
纯CSS 实现 img 图片换色
fans_x的博客
06-28 707
时的颜色，后两个参数分别是 X、Y 轴的偏移量。这里的原理就是让原本的。偏移处用户视图区域(偏移值可以更改)，然后让新的图片偏移到原。来换色，而在日常开发过程中通常会遇到设计那边要求图片在。时换色，那么怎么利用 CSS 来完成这个效果呢。这样的图片却不可以通过。
使用CSS改变图片颜色
m0_50082421的博客
01-10 2235
CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。项目中遇到需要将下载的图片的白色背景修改为灰色，经过调查发现主要用到了的css的滤镜属性。首先创建一个 .svg 结尾的文件。
css 更换图片颜色
a1309525802的博客
07-06 3993
css 更换图片颜色
教你如何用CSS修改图片颜色
千锋教育
09-19 8282
它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。是有一点类似box-shadow，但是二者还是有显著差别的，我后面会写一篇专门的文章来比较二者的差别。原理嘛，其实很简单的，用到的就是 CSS3 滤镜filter中的drop-shadow，该滤镜可以给图片非透明区域添加投影。接下来我们稍微更改一下原代码，将原图设置在div外部并隐藏，变色后的投影放置在div中。如果想换成其他颜色，直接更改第三个参数就Ok了~是不是很简单。这段代码，代表投射出一个和该图片一样的形状，
利用CSS改变图片颜色的多种方法！
able_me的博客
08-06 7343
前言 “说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。” 强大的 CSS:filter CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 filter: none | blur() | brightness() ...
通过css改变图片颜色
m0_71338372的博客
08-04 932
通过 CSS，你可以使用 filter 属性来改变图片的颜色。有几个可用的 CSS filter 函数可以帮助你实现这个效果。其中一个是 sepia() 函数，它可以使图片呈现出复古的色调。另一个是 grayscale() 函数，它可以将图片转换为灰度图像。还有一个常用的是 hue-rotate() 函数，它可以围绕颜色轮旋转图片的颜色。你可以根据需要调整这些函数的参数来实现你想要的图片颜色效果。你还可以结合使用这些函数来达到更复杂的效果。
CSS实现背景图片透明而文字不透明效果的两种方法
12-13
这种方法利用了 `::before` 伪元素和 CSS 的滤镜 (`filter`) 属性来模糊背景图像，从而达到一种朦胧的透明感。首先，我们为包含文本的元素添加一个 `::before` 伪元素，并将背景图片设置为该伪元素的背景。接着，...
12种炫酷CSS3图片切换过渡效果
12-29
在“12种炫酷CSS3图片切换过渡效果”这个主题中，我们将深入探讨这些效果的实现方法和应用场景。 1. **滑动切换**：这种效果通常用于轮播图，图片沿水平或垂直方向平滑滑动，提供了一种流畅的视觉过渡。通过`...
css改变图片颜色
alice_nx的博客
11-17 3043
( x偏移,y偏移,模糊值,颜色) ，比如：filter: drop-shadow(100px 0 0 red);意思就是我们的图标大小是100px，那就x偏移100px，然后需要的图标是红色。五、filter: grayscale(100%) brightness(200%)，如果颜色调整不理想，可以将brightness的百分比继续增加已达到需要的白色效果。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。
css修改图片颜色
AiTingYan的博客
07-20 628
原理就是用到css3 滤镜filter中的drop-shadow，该滤镜可以给图片非透明区域添加投影 语法： filter:drop-shadow(水平阴影偏移距离 垂直阴影偏移距离 投射的阴影颜色 ); 首先准备一张背景色透明的图片如下: 首先用一个div将该图片包裹住，给图片添加： filter: drop-shadow(15px 0px #fff) 这段代码，代表投射出一个和该图片一样的形状， 三个参数分别代表： 水平向右移动15px， 垂直方向不变， 投射出的形状颜色为白色。 最终将图片改为白色
用css给png图标换颜色
jiyutr的博客
05-21 1171
在网页设计中，图标起着非常重要的作用。它们不仅可以提升页面的美观度，还能够提供直观的可视化信息。然而，有时候我们可能需要对图标进行一些修改，以使其更符合网页的整体风格。本文将介绍一种方法，可以帮助我们在纯色图标上应用不同的颜色，以满足网页设计的需求。
css改变图片部分元素颜色
09-01
在CSS中，可以使用一些属性来改变图片部分元素的颜色。 首先，可以使用filter属性来改变图片的色调。filter属性允许我们应用不同的视觉效果到元素上，包括改变颜色。其中，最常用的属性是hue-rotate()，可以通过旋转色相的角度来改变图片的颜色。例如，filter: hue-rotate(45deg);会将图片的颜色向右旋转45度。 其次，可以使用background-blend-mode属性来改变图片元素的背景颜色。通过设置不同的blend模式，可以调整图片与背景色之间的混合效果。常见的一些blend模式有multiply（叠加），screen（屏幕），overlay（叠加），color-dodge（颜色减淡）等等。例如，background-blend-mode: multiply;会将图片与背景色进行叠加，产生某种颜色效果。 此外，还可以使用CSS的伪元素:before和:after来为图片添加背景颜色层。通过设置伪元素的背景颜色、位置和大小等属性，可以实现在图片上添加彩色效果。例如，可以使用:before来添加一个半透明的蓝色遮罩层，使图片呈现蓝色调。 最后，还可以使用CSS3的mask属性来实现图片的颜色遮罩效果。通过设置mask-image属性为线性渐变或径向渐变，可以实现对图片的部分元素进行颜色遮罩。mask-position和mask-size属性可以设置遮罩的位置和大小。例如，可以使用linear-gradient来创建一个从红色到透明的渐变，然后将其应用于mask-image，实现对图片的部分元素进行红色遮罩。 总之，通过使用filter属性、background-blend-mode属性、伪元素和mask属性等技术，可以在CSS中改变图片部分元素的颜色。这些方法提供了一些灵活的手段，让我们可以实现各种各样的颜色效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值