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

通过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%);

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

港中文斯坦福提出SD加速模型PCM,一步即可生成图像和视频,可直接与SD1.5,SDXL,AnimateLCM结合!

又有新的SD加速模型可以用了,PCM解决了原来LCM模型的各种问题。并且对 AnimateLCM 也做了优化,用PCM直接生成动画也可以保证质量了。 PCM从这三个角度说明了LCM的设计空间是有限的并很好地解决了这些限制。 PCM主要改善了三个LCM原有的问题:…

SpringBoot Redis读写与数据序列化 RedisTemplate 与 StringRedisTemplate 防转字节

介绍 RedisTemplate 对象在底层默认会转成字节,造成了内存的开销很大,这是他底层进行处理的,造成可读性差,如需要转成简单的字符串存储需要进行序列化的配置。 RedisTemplate 配置类 Configuration public class RedisConfig {Beanpublic …

文本数据预处理

1.定义 数据预处理:在数据分析之前,对数据进行初步处理 缺失值填写噪声处理不一致数据修正中文分词等 2. 文本数据预处理相关操作 2.1. 中文分词 安装相关库pip install jiaba2.1.1 相关使用 全模式 一段文本种所有可能出现地词语都扫描出来,一段文…

基于pytorch的车牌识别

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 一、导入数据 from torchvision.transforms import transforms from torch.utils.data import DataLoader from torchvision import datase…

微服务第二轮

学习文档 背景 由于每个微服务都有不同的地址或端口,入口不同 请求不同数据时要访问不同的入口,需要维护多个入口地址,麻烦 前端无法调用nacos,无法实时更新服务列表 单体架构时我们只需要完成一次用户登录、身份校验&#xff…

【十大排序算法】选择排序

选择就像是在谱曲,每个决定就是一个音符,只有将它们有序地安排在一起,才能奏响美妙的乐章。 文章目录 一、选择排序的思想二、选择排序的发展历程三、选择排序具象化四、选择排序算法实现五、选择排序的特性推荐阅读 一、选择排序的思想 选…

[STM32]定位器与PWM的LED控制

目录 1. 深入了解STM32定时器原理,掌握脉宽调制pwm生成方法。 (1)STM32定时器原理 原理概述 STM32定时器的常见模式 使用步骤 (2)脉宽调制pwm生成方法。 2. 实验 (1)LED亮灭 代码 测试效果 (2)呼吸灯 代码 测试效果 3.总结 1. 深入了解STM32定时器原…

绿联云NAS一些探索(1):SSH、包管理器探测、安装docker-compose等

绿联云NAS一些探索SSH、包管理器探测、安装docker-compose等 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https:…

git报错解决方法error: remote origin already exists.

有时想添加远程本地仓库和远程公司仓库,但git remote的时候发现关联的是一样的,你再去关联时会报错,这时候你应该清除你想关联的远程仓库,再次连接就可以了 下面这个错误提示是远程源已经存在 现在你可以这样做 1、查看远程库的信…

Jenkins工作流程原理

持续集成:自动部署打包发布代码 Jenkins工作流程 项目已经基于Jenkins实现了持续集成,每当我们push代码时,就会触发项目完成自动编译和打包。而需要运行某个微服务时,我们只需要经过两步: 第一步,访问je…

双网卡配置IP和路由总结

1.在网络适配器属性IPv4中设置默认网关(记网关地址为A),将会在本地路由标中新增一条记录: 网络号子网掩码网关地址0.0.0.00.0.0.0A 2.如果有两个网卡(假设一个连接内网,一个连接互联网)&#…

muse-ui的select下拉框没有出现在底部

这个是muse-ui的官网文档 Muse-UI 如果进不去的,可以试着翻墙用外网看看,这里很奇怪,我前几天进不去,然后翻墙可以进,这两天不翻墙也能正常进去了 说一下问题,就是当我们使用 muse-ui的下拉框的时候&…

碰撞问题和单调栈的结合-735. 小行星碰撞【有小坑】

题目链接及描述 . - 力扣(LeetCode). - 备战技术面试?力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/asteroid-collision/description/?envTypestudy-plan…

SpringBoot+Vue在线考试答题系统【附:资料➕文档】

前言:我是源码分享交流Coding,专注JavaVue领域,专业提供程序设计开发、源码分享、 技术指导讲解、各类项目免费分享,定制和毕业设计服务! 免费获取方式--->>文章末尾处! 项目介绍016: 本…

ubuntu20.04 安装OpenSSL 1.0.2o (借助腾讯AI完全OK)

文章目录 ubuntu20.04安装openssl-1.0.2o安装后看不到版本信息如何解决 腾讯云 AI 代码助手: 要确认 Linux 开发板的 CPU 是多少位的,可以使用以下方法: 打开终端。输入以下命令,然后按回车键: cat /proc/cpuinfo这将显示关于 CP…

李廉洋:6.6黄金原油怎么看?今日行情分析及最新策略。

黄金消息面分析:美指走强未能抑制金价升势。黄金价格大幅上涨,在美国公布喜忧参半的经济数据后,金价与周二的走势发生180度大转弯,这些数据可能保证美联储设定的借贷成本降低。美国10年期基准国债收益率下跌3个基点,至…

PCA算法

PCA算法 原创 小王搬运工 时序课堂 2024-06-06 19:16 四川 1. PCA算法 PCA算法称为主成分分析,是一种无监督学习算法,主要用于数据降维和特征提取。 PCA是一种数据降维模型,它的基本模型是通过线性变换将数据转换到新的空间,这…

[经验] 腰果树的外观特征和特点是什么 #媒体#微信

腰果树的外观特征和特点是什么 腰果树是一种生长在热带和亚热带地区的落叶乔木,其叶子为互生,倒披针形或披针形,整个树枝条生长勃勃,长势喜人。 腰果树的树皮是灰色或深褐色的,有着纵向裂缝,树皮粗糙而有光…

解决 ubuntu 空间占满,删除文件后磁盘没有释放 的问题

今天打开网站页面发现显示不正常,很多资源文件无法正常展示。F12页面后,发现报的HTTPS错误,随后感觉可能是nginx的问题,就直接重启了nginx,nginx重启后发现问题依旧。此时查看nginx日志无任何报错。 心里想着看看磁盘空…

压力测试-性能指标-Jmeter使用-压力测试报告

文章目录 1.压测目的2.性能指标3.Jmeter3.1Jmeter使用3.1.1 运行Jmeter3.1.2 添加线程组3.1.3设置HTTP请求3.1.4 设置监视器 3.2 查看Jmeter压测结果3.2.1 查看结果树3.2.2 查看汇总报告3.2.3 查看聚合报告3.2.4 查看汇总图 1.压测目的 内存泄漏:OOM,重…