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

通过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…

css移动端开发

1.视口 视口标签 视口元标签&#xff08;Viewport Meta Tag&#xff09;用于控制网页在移动设备上的视口行为&#xff0c;确保页面能够正确缩放和调整。通常在HTML的<head>部分添加如下代码&#xff1a; <meta name"viewport" content"widthdevice-…

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

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

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

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

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

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

Chrome DevTools 使用攻略

Chrome DevTools是谷歌浏览器提供的一套强大的开发工具&#xff0c;对于前端开发人员来说是不可或缺的利器。下面将从多个方面介绍Chrome DevTools的使用攻略&#xff1a; 一、启动方式 通过快捷键&#xff1a; 在Windows/Linux上&#xff0c;按下 F12、Ctrl Shift I 或 C…

集成学习笔记

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

Android开发之内访Sqlite数据库(六)

文章目录 1. Android开发之外访Sqlite数据库1.1 Sqlite数据库的优点1.2 Sqlite接口简介接口中的抽象方法接口中的实例方法接口的构造方法示例步骤例子 —— 实现增删改查 1. Android开发之外访Sqlite数据库 SQLite是一个软件库&#xff0c;实现了自给自足的、无服务器的、零配…

python的优势有哪些?

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

K8s:无状态

无状态服务 无状态服务是指服务的实例之间没有持久化状态&#xff0c;每个实例都是相同的&#xff0c;可以互换使用。 调度器 ReplicationController 简称 RC是 Kubernetes 早期版本中用来确保 Pod 副本始终运行的 API 对象。它通过监控 Pod 副本的数量&#xff0c;确保任何…

vue 常用的 UI 框架及表格

vue 3 常用的 UI 框架及表格 常用 UI 框架 Element PlusAnt Design VueiViewVxe UIVuetifyBootstrap VueMuse UI 专业表格 SpreadJSAG GridVxe Table

Linux——内存管理代码分析

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

深度学习之指数移动平均模型(EMA)介绍

指数移动平均模型&#xff08;Exponential Moving Average Model&#xff0c;EMA&#xff09;是一种用于平滑时间序列数据的技术。它通过对数据进行加权平均来减少噪音和波动&#xff0c;从而提取出数据的趋势。 在深度学习中&#xff0c;EMA 常常用于模型的参数更新和优化过程…

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

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

python随机显示四级词汇 修改版直接显示释义

python随机显示四级词汇 修改版直接显示释义 添加暂停 和继续(按下中建滚轮触发) 按下右键 退出程序 解决在暂停后 ,重新调用update_word 会明显发现每隔5秒更新一次单词的速率已经改变 速率改变的问题可能是由于暂停期间没有清除之前的定时器所导致的。为了确保重新调用updat…

Linux高级进阶-ssh配置

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

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

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

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

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

PasteCode系列系统说明

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