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

news2024/11/26 11:56:11

通过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.coloradmin.cn/o/1795457.html

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

相关文章

stm32 定时器输出比较(OC)与PWM的理解和应用

不积跬步,无以至千里;不积小流,无以成江海。大家好,我是闲鹤,公众号 xxh_zone,十多年开发、架构经验,先后在华为、迅雷服役过,也在高校从事教学3年;目前已创业了7年多&am…

f1c100s 荔枝派 系统移植

一。交叉编译环境配置 1.1下载交叉工具链:https://releases.linaro.org/components/toolchain/binaries/7.2-2017.11/arm-linux-gnueabi/ 1.2解压安装 在home目录下新建 工程目录:mkdir f1c100s_project 将windows下的gcc-linaro-7.2.1-2017.11-x86…

微信小程序毕业设计-预约挂号系统项目开发实战(附源码+论文)

大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:微信小程序毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计…

自导自演的39亿大雷?

深夜炸雷!39亿存款或无法收回,11万股民懵了!A股又出了离谱事件。 4日深夜,ST亿利公告称,公司存放在亿利财务公司的39亿存款已被划分为次级贷款,也就是不良贷款的一种,存在重大可收回性风险。又是…

【第一节】数据结构和算法绪论

目录 一、数据结构的起源与发展 二、什么是数据结构 三、数据的逻辑结构和存储结构 四、数据类型和数据结构 五、算法 六、算法与数据结构的关系 七、算法时间复杂度和空间复杂度 一、数据结构的起源与发展 数据结构的起源可以追溯至1968年。当时,美国的唐欧…

OpenCV的“画笔”功能

类似于画图软件的自由笔刷功能,当按住鼠标左键,在屏幕上画出连续的线条。 定义函数: import cv2 import numpy as np# 初始化参数 drawing False # 鼠标左键按下时为True ix, iy -1, -1 # 鼠标初始位置# 鼠标回调函数 def mouse_paint(…

秀肌肉-海外短剧系统的案例展示

多语种可以选择,分销功能,多种海外支付方式,多种登录模式可供选择,总之你想到的我们都做了,你没想到的我们也都做了

Activity->Activity中动态添加Fragment->Fragment回退栈BackStack

Fragment回退栈 Fragment回退栈用于管理Fragment的导航历史(添加、删除、替换)。每个Activity都有一个包含其所有Fragment的FragmentManager,调用其addToBackStack方法时,这个事务就会被添加到FragmentManager的回退栈中当用户按下返回键时,…

kotlin 调用java的get方法Use of getter method instead of property access syntax

调用警告 Person.class public class Person {private String name;Person(String name) {this.name name.trim();}public String getName() {return name;}public void setName(String name) {this.name name;}public String getFullName() {return name " Wang&quo…

ChatTTS+Python编程搞定语音报时小程序

文字转语音神器Python编程搞定语音报时小程序 今天一个好哥们发了一个文字转语音的AI神器的短视频。这个神器的网站是[ChatTTS - Text-to-Speech for Conversational Scenarios][https://chattts.com/],如下图所示: 这个开源项目可以从github.com上下载…

VisualStudio2022离线包安装后无法进行版本升级(Visual Studio installer 卡在正在下载进度条0%)

目录 一、问题现象二、问题分析三、解决办法恢复正常 一、问题现象 表现1(未安装时,安装) 表现2(已安装,升级) 二、问题分析 原因:无法访问 aka.ms 测试方法:在浏览器中输入: https://aka.ms/vs/16/rele…

[笔试训练](三十四)100:[NOIP2008]ISBN号码101:kotori和迷宫102:矩阵最长递增路径

目录 100:[NOIP2008]ISBN号码 101:kotori和迷宫 102:矩阵最长递增路径 100:[NOIP2008]ISBN号码 题目链接:[NOIP2008]ISBN号码_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解: 简单模拟 #include <iostream> #include<string> using namespace std; str…

文件上传题目练习

[HNCTF 2022 Week1]easy_upload 先尝试上传一个php文件&#xff0c;发现直接就成功了 用蚁剑测试连接成功 找到flag [NISACTF 2022]bingdundun~ 白名单上传 这里因为尝试了很多绕过方式都不成功&#xff0c;去搜索了一下wp&#xff0c;发现要用到Phar://伪协议 补充&#xff…

【多模态】36、ShareGPT4V | 借助 GPT4V 的能够来生成更丰富的 caption 用于提升 LMM 模型的能力

文章目录 一、背景二、方法2.1 ShareGPT4V 数据集构建2.2 ShareGPT4V-PT 数据生成2.3 ShareGPT4V-7B Model 三、效果3.1 benchmark3.2 定量分析3.3 多模态对话 四、一些例子 论文&#xff1a;ShareGPT4V: Improving Large Multi-Modal Models with Better Captions 代码&#…

Python logging 模块详解

Python 的 logging 模块提供了一个强大而灵活的日志系统。它是 Python 标准库的一部分&#xff0c;因此可以在任何 Python 程序中使用。logging 模块提供了许多有用的功能&#xff0c;包括日志消息的级别设置、日志消息的格式设置、将日志消息输出到不同的目标&#xff0c;以及…

【机器学习】GLM4-9B-Chat大模型/GLM-4V-9B多模态大模型概述、原理及推理实战

​​​​​​​ 目录 一、引言 二、模型简介 2.1 GLM4-9B 模型概述 2.2 GLM4-9B 模型架构 三、模型推理 3.1 GLM4-9B-Chat 语言模型 3.1.1 model.generate 3.1.2 model.chat 3.2 GLM-4V-9B 多模态模型 3.2.1 多模态模型概述 3.2.2 多模态模型实践 四、总结 一、引言…

《精通ChatGPT:从入门到大师的Prompt指南》大纲目录

第一部分&#xff1a;入门指南 第1章&#xff1a;认识ChatGPT 1.1 ChatGPT是什么 1.2 ChatGPT的应用领域 1.3 为什么需要了解Prompt 第2章&#xff1a;Prompt的基本概念 2.1 什么是Prompt 2.2 好Prompt的特征 2.3 常见的Prompt类型 第二部分&#xff1a;Prompt设计技巧 第…

SOA的发展历史

1.SOA的发展历程 回顾SOA发展历程&#xff0c;我们把其大致分为了三个阶段&#xff0c;下面将分别介绍每个阶段的重要标准和规范。 1.1.萌芽阶段 这一阶段以XML技术为标志&#xff0c;时间大致从20世纪90年代末到21世纪初。XML系W3C所建&#xff0c;源自流行的标准通用标记语…

多表连接查询和子查询

一、连接查询 连接查询是SQL语言最强大的功能之一&#xff0c;它可以执行查询时动态的将表连接起来&#xff0c;然后从中查询数据。 1.1、连接两表的方法 在SQL中连接两表可以有两种方法&#xff0c;一种是无连接规则连接&#xff0c;另一种是有连接规则连接。 无连接规则连…

多卡聚合智能融合通信设备在无人机无线视频传输应用

无人驾驶飞机简称“无人机”&#xff0c;是利用(无线电)遥控设备和自备的程序控制装置操纵的不载人飞行器&#xff0c;现今无人机在航拍、农业、快递运输、测绘、新闻报道多个领域中都有深度的应用。 无人机无线视频传输保证地面人员利用承载的高灵敏度照相机可以进行不间断的画…