前端图片在切换暗黑模式时太亮该怎么办?

通过css中的filter属性来实现,进行图片的色系反转、亮度、对比度调整等

1、invert

反转输入图像,值为 100% 则图像完全反转,值为 0% 则图像无变化

filter: invert(1);

2、blur

给元素应用高斯模糊效果。

filter: blur(5px);

3、brightness

调整元素的亮度。取值范围为0到1,0表示全黑,1表示原始亮度。

filter: brightness(2);

4、contrast

调整元素的对比度。取值范围为0到1,0表示无对比度,1表示原始对比度。

filter: contrast(200%);

5、drop-shadow

给元素添加阴影效果。可以指定阴影的颜色、偏移量和模糊半径。

filter: drop-shadow(16px 16px 10px black);

6、grayscale

将元素转为灰度图像。取值范围为0到1,0表示原始颜色,1表示完全灰度。

filter: grayscale(100%);

7、hue-rotate

旋转元素的色相。取值范围为0deg到360deg,0deg表示原始色相。

filter: hue-rotate(90deg);

8、opacity

调整元素的透明度。取值范围为0到1,0表示完全透明,1表示不透明。

filter: opacity(50%);

9、saturate

调整元素的饱和度。取值范围为0到1,0表示无饱和度,1表示原始饱和度。

filter: saturate(200%);

10、sepia

将元素转为深褐色。取值范围为0到1,0表示原始颜色,1表示完全深褐色。

filter: sepia(100%);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/23388.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何解决网络问题?

组织和 IT 管理员尽其所能完善他们的网络,但是,不同程度的网络问题仍然可能出现,这些网络问题需要立即响应和解决,如果这些问题在不合理的时间内得不到解决,网络和组织的损害可能会付出高昂的代价。这就是为什么 IT 管…

【漏洞复现】锐捷校园网自助服务系统 login_judge.jsf 任意文件读取漏洞(XVE-2024-2116)

0x01 产品简介 锐捷校园网自助服务系统是锐捷网络推出的一款面向学校和校园网络管理的解决方案。该系统旨在提供便捷的网络自助服务,使学生、教职员工和网络管理员能够更好地管理和利用校园网络资源。 0x02 漏洞概述 校园网自助服务系统/selfservice/selfservice…

《大道平渊》· 玖 —— 把高深的道理讲的通俗,这是一门艺术。

《平渊》 玖 "化繁为简, 点石成金。" 把高深的道理讲得通俗,这是一门艺术! 讲述者能够站在群众的角度,用尽可能简单通俗的语言来解释复杂的概念。 讲述者需要对概念有深刻的理解,还要有灵活的表达能力。 群众愿意接受…

从当当网批量获取图书信息

爬取当当网图书数据并保存到本地,使用request、lxml的etree模块、pandas保存数据为excel到本地。 爬取网页的url为: http://search.dangdang.com/?key{}&actinput&page_index{} 其中key为搜索关键字,page_index为页码。 爬取的数据…

15- Redis 中的 整数集合 数据结构

整数集合是 Set 对象的底层实现之一。当一个 Set 对象只包含整数值元素,并且元素数量不大时,就会使用整数集合这个数据结构作为底层实现。 1. 整数集合结构设计 整数集合本质上是一块连续内存空间,它的结构定义如下: typedef s…

集成学习笔记

集成学习 简介 决策树 GBDT 拟合残差 一般 GBDT XGBOOST 弓 1 能表达样本落入的子节点,但是不能把表示结构 2 3.正则项 – 惩罚 防止过拟合,比如一个值总共有10颗树都是由同一颗树决定的,过拟合 5 找到一种方式不依赖于损失函数 …

python的优势有哪些?

python的优点很多,下面简单地列举一些: 简单 Python的语法非常优雅,甚至没有像其他语言的大括号,分号等特殊符号,代表了一种极简主义的设计思想。阅读Python程序像是在读英语。 易学 Python入手非常快,学习…

Linux——内存管理代码分析

虚空间管理 页框和页的关系 页框 将内存空间分为一个个大小相等的分区(比如:每个分区4KB),每个分区就是一个页框,也叫页帧,即物理页面,是linux划分内存空间的结果。 每个页框都有一个页框号,即内存块号、物理块号。 页 将用户…

完整指南:远程管理 Linux 服务器的 Xshell6 和 Xftp6 使用方法(Xshell无法启动:要继续使用此程序........,的解决方法)

😀前言 在当今软件开发领域,远程管理 Linux 服务器已成为日常工作的重要组成部分。随着团队成员分布在不同的地理位置,远程登录工具的使用变得至关重要,它们为开发人员提供了访问和管理服务器的便捷方式。本文将介绍两款功能强大的…

Linux高级进阶-ssh配置

Ubuntu-system 允许使用root远程登陆 apt install ssh -y在/etc/ssh/sshd_config 文件修改PermitRootLogin yes systemctl restart ssh远程连接软件用户名为root

Ubuntu系统中Apache Web服务器的配置与实战

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

Educational Codeforces Round 166(Div.2) A~D

A.Verify Password(字符串) 题意: Monocarp正在开发他的新网站,目前面临的挑战是如何让用户选择强密码。 Monocarp认为,强密码应满足以下条件: 密码只能由小写拉丁字母和数字组成;字母后面不…

PasteCode系列系统说明

定义 PasteCode系列是指项目是基于PasteTemplate构建的五层以上项目,包括不仅限于 Domain EntityFrameworkCore Application.Contracts Application HttpApi.Host 熟悉ABP vNext就很好理解了,因为PasteTemplate就是基于ABP的框架精简而来!在…

代码随想录算法训练营第四十六 | ● 139.单词拆分 ● 关于多重背包,你该了解这些! ● 背包问题总结篇!

139.单词拆分 视频讲解&#xff1a;https://www.bilibili.com/video/BV1pd4y147Rh https://programmercarl.com/0139.%E5%8D%95%E8%AF%8D%E6%8B%86%E5%88%86.html class Solution { public:bool wordBreak(string s, vector<string>& wordDict) {unordered_set<st…

上市即交付,比亚迪秦L DM-i万人交车暨千媒众测开营

6月6日&#xff0c;“引领中级 开创油耗2时代”秦L DM-i万人交车暨千媒众测开营仪式在比亚迪大本营深圳盛大举行。 众多车主代表亲临现场&#xff0c;与全国各地的比亚迪4S店千店联动&#xff0c;将秦L DM-i全国交付推向新的高潮。发布即量产&#xff0c;上市即交付&#xff0…

ESP32:FreeRTOS节拍配置(vTaskDelay延时10ms改为1ms)

文章目录 背景方法手动修改sdkconfig通过idf.py menuconfig 背景 在FreeRTOS的默认配置中&#xff0c;任务调度的频率默认是100HZ&#xff0c;因此默认vTaskDelay默认延时是10ms。 FreeRTOS 的系统时钟节拍可以在配置文件 FreeRTOSConfig.h 里面设置&#xff1a;#define confi…

【AI基础】第四步:保姆喂饭级-langchain+chatglm2-6b+m3e-base

在第三步手动安装chatglm2-6b时&#xff0c;已经可以通过web进行交互。langchain重新封装了一下AI框架&#xff0c;提供更加友好的开发功能&#xff0c;类似于AI届的spring框架。langchain的安装过程也类似于上一步说的&#xff1a;【AI基础】第三步&#xff1a;纯天然手动安装…

企业获客有哪些好的广告推广拓客渠道?

在这个数字化营销的时代&#xff0c;企业要想在激烈的市场竞争中脱颖而出&#xff0c;选择正确的广告宣传渠道至关重要。随着互联网技术的飞速发展&#xff0c;各类媒体平台如雨后春笋般涌现&#xff0c;为企业提供了广阔的宣传空间。云衔科技通过多元化的媒体渠道&#xff0c;…

485数据采集模块

在工业自动化与智能化的浪潮中&#xff0c;数据采集作为整个系统的基础和核心&#xff0c;其准确性和实时性直接关系到生产效率和产品质量。而485数据采集模块&#xff0c;作为连接现场设备与上位机的重要桥梁&#xff0c;其性能与稳定性对于整个系统的运行至关重要。HiWoo Box…

【AIGC X UML 落地】通过多智能体实现自然语言绘制UML图

前天写了篇博文讲到用PlantUML来绘制C类图和流程图。后台有读者留言&#xff0c;问这步能否自动化生成&#xff0c;不想学习 PlantUML 语法。 我想了下&#xff0c;发现这事可行&#xff0c;确实可以做到通过自然语言的描述就能实现 UML图的绘制&#xff0c;昨天晚上加了个班到…