css filter:inver属性灵活使用

最新推荐文章于 2025-03-20 09:15:00 发布

原创最新推荐文章于 2025-03-20 09:15:00 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #filter #svg

本文介绍了一种利用 CSS 的 filter 属性实现图标颜色反转的方法，并通过调整背景颜色来达到预期显示效果的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先有一个图标是这样👇 （只是一个图标背景不是白色）
在这里插入图片描述
要实现这种效果背景色粉色图标提亮白色👇

第一步加背景色粉色

background:pink

效果如下👇
在这里插入图片描述
要将图标变为白色就可以使用inver进行反转
1表示反转100%

filter:invert(1)

效果如下👇
在这里插入图片描述
可以看到图标颜色反转了但是背景色也一起反转
此时要将背景色改为当前反转后的背景色
即这个有点绿绿的颜色用取色器取色后是#003f34

background:#003f34

就可以得到需要的效果👇
在这里插入图片描述
总结

filter:invert(1);
background:#003f34

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_44771852

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【CAPL实战：以太网】CAPL使用结构体的方式组装一条DoIP车辆声明消息（方法1）

jasonj333

07-31

482

如果你参加过我的《CAPL编程系统性课程》，你就结构体类型天然就能表示报文结构，用结构体表示报文虽然麻烦，但灵活度更高。我们今天试着用结构体类型表示DoIP车辆声明消息的DoIP报头，然后组装一条DoIP消息发送出去。

说说你对CSS中`filter: invert`的了解

王铁柱666的博客

12-12

440

是CSS中一种功能强大的滤镜属性，它允许开发人员轻松地实现图像的颜色反转效果，为前端开发带来了更多的灵活性和创意空间。属性是一种强大的工具，用于在前端开发中实现图像的颜色反转效果。

参与评论您还未登录，请先登录后发表或查看评论

学习CSS滤镜属性 `filter: invert()`

最新发布

m0_72030584的博客

03-20

566

学习CSS滤镜属性 `filter: invert()`

css中的filter属性

m0_69433535的博客

10-15

958

css中的filter函数总结 filter:invert(1);数值范围0-1,一般用来调整图片边框的渲染 filter:grayscale(1);调整元素的灰度值，数值范围0-1 filter:blur(10px); 调整元素的模糊程度，单位像素px filter:sepia(0.5);用来调整元素的褐色程度,数值范围0-1 filter:saturate(0.2);用来调整元素的饱

CSS的filter属性详解

m0_74293254的博客

11-29

8013

上述代码将给class为"invert-element"的元素应用一个反色效果，使图像的颜色与原来相反，亮度和对比度保持不变。上述代码将给class为"opacity-element"的元素应用一个透明效果，使元素的透明度降低到原来的50%。上述代码将给class为"grayscale-element"的元素应用一个灰度效果，使图像变为原来亮度的50%。上述代码将给class为"grayscale-sepia-saturate"的元素应用一个灰度、褐色和饱和度增强的效果，使图像呈现出复古的灰色调。

css filter详解

奔跑的小小牛

10-16

5701

filter 属性详解属性名称类型说明 grayscale 灰度值为数值取值范围从0到1的小数(包括0和1) sepia 褐色值为数值取值范围从0到1的小数(包括0和1) saturate 饱和度值为数值默认是1，可以是小于1的小数

inver_pid.rar_inverter_lc filter_三相逆变_逆变器_逆变器 PID

07-14

标题中的“inver_pid.rar_inverter_lc filter_三相逆变_逆变器_逆变器_PID”揭示了我们讨论的核心是关于一个包含了PID控制器的三相逆变器系统，该系统结合了LC滤波器。这个压缩包可能包含相关的仿真模型、设计参数或...

遗传算法优化VRP问题：结合Inver.Over算子与禁忌搜索

文章中提到的"Inver-Over"遗传操作算子是一种改进的交叉策略，它在传统遗传算法的交叉操作基础上增加了反转和交换元素的机制，以增加解的多样性，防止早熟收敛。同时，作者还将禁忌搜索算法结合进来，这是一种局部...

随机需求车辆路线优化：基于Inver-over PSO-DP算法的研究

这篇论文主要探讨了变需求车辆路线问题的建模以及采用基于Inver-over操作的PSO-DP算法进行优化求解。在物流和运输领域，车辆路线问题（Vehicle Routing Problem, VRP）是一个经典而复杂的问题，旨在寻找最有效的...

xiv.curso.inverno:带有XIV遗传学课程（2018）的课堂脚本教程

05-01

这是一份关于XIV冬季遗传学课程的教程资料，特别关注了使用R语言进行数据分析和解释的方面。R是一种广泛应用于统计计算和图形可视化的开源编程语言，尤其在生物信息学和遗传学领域，R因其强大的数据处理和可视化能力...

CSS filter（滤镜）详解

Itmastergo的博客

01-13

1136

说起滤镜可能大家首先想到的就是 PhotoShop 之类的制图软件，通过此类软件的滤镜可以对图片进行美化。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。这里来学习一下 CSS 中滤镜的使用。

css filter 属性介绍

莫莫博客

05-23

493

请注意， filter 属性可能不会在所有浏览器中都被完全支持，特别是旧版本的浏览器。因此，在使用之前，请确保检查目标浏览器的兼容性。等的可视化效果，如模糊、亮度、对比度、饱和度等。它接受一系列不同的函数值，这些函数值可以组合起来创建复杂的视觉效果。CSS的filter属性提供了对元素。

CSS属性-filter用法

Lc_style的博客

01-31

1499

由于blur的特点是多个元素相互碰撞会出现融合，所以就有了上面的小尾巴的效果，而属性值hue-rotate()这个高斯函数的含义就是图片色相旋转，设置不同的度数可以实现不同的颜色值。

CSS filter滤镜属性使用

热门推荐

YunWisdom

12-27

1万+

CSS的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过CSS对图像进行处理，CSS的filter属性可以得到一些类似PS的滤镜效果。浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-。

css 样式之 filter 滤镜属性用法与示例

weixin_50339217的博客

08-18

6087

css 样式之滤镜 filter 属性

过滤器Filter

qq_48202505的博客

02-24

702

Spring项目中过滤器Filter详解

【css技巧】CSS filter的神奇用法 | 褪色|融合效果等

坚信万物皆可切的切图仔

09-17

3450

前言我们在处理图片时，经常使用的一个功能就是滤镜，它能使一张图像呈现各种不同的视觉效果。在 CSS 中，也有一个filter属性，让我们能用 CSS 代码为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等。 CSS filter的基础使用非常简单，CSS 标准里包含了一些已实现预定义效果的函数（下面blur、brightness、contrast等），我们可以通过指定这些函数的值来实现想要的效果： /* 使用单个滤镜（如果传入的参数是百分数，那么也可以传入对应的小数：40% --> 0

CSS中经常用到的filter属性,你真的知道它的用法吗?

weixin_62328265的博客

02-22

2190

CSSfilter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

一行代码使用CSS的黑暗模式

JNPF快速开发平台的博客

08-18

626

这是一个绝对不费吹灰之力的方法，将已经开发好的网站转换为支持黑暗模式。话不多说，我们开始吧! ???? 以这个新闻应用为例现在添加魔术CSS html[theme='dark-mode'] { filter: invert(1) hue-rotate(180deg); } 瞧！你完成了 ✌ 实现黑暗模式说明现在，让我们试着理解下面发生了什么。 CSSfilter属性将模糊或颜色转移等图形效果应用到元素上。滤镜通常用于调整图像、背景和边框的渲染。对于这种黑暗模式，我们将