当前位置: 首页 > news >正文

CSS 模糊效果 CSS 黑白效果 CSS调整亮度 对比度 饱和度 模糊效果 黑白效果反转颜色

CSS 模糊效果 CSS 黑白效果 CSS调整亮度 饱和度 模糊效果 黑白效果

  • 实现 调整亮度 饱和度 模糊效果 黑白效果 使用 filter
    • 1、模糊
    • 2、亮度
    • 3、对比度
    • 4、饱和度
    • 5、黑白效果
    • 6、反转颜色
    • 7、组合使用
    • 8、 filer 完整参数

实现 调整亮度 饱和度 模糊效果 黑白效果 使用 filter

1、模糊

blur() 用于模糊元素,可以设置模糊的程度,例如filter: blur(5px);表示模糊程度为5像素
在这里插入图片描述

2、亮度

brightness() 用于调整元素的亮度,可以设置一个百分比值或者一个具体的颜色值,例如filter: brightness(160%);表示将元素亮度增加60%

在这里插入图片描述

3、对比度

contrast() 用于调整元素与背景之间的对比度,可以设置一个百分比值或者一个具体的颜色值,例如filer: contrast(160%);表示将元素与背景的对比度增加60%。

在这里插入图片描述

4、饱和度

saturate() 用于增加或减少元素的饱和度,可以设置一个百分比值或者一个具体的颜色值,例如filter: saturate(200%);表示将元素的饱和度增加到最大值。

在这里插入图片描述

5、黑白效果

grayscale() 用于将元素转换为灰度图像,可以设置一个百分比值或者一个具体的颜色值,例如filter: grayscale(100%);表示将元素转换为完全的灰度图像。
在这里插入图片描述

6、反转颜色

filter: invert(1) 用于反转图像的颜色。当应用于图像时,它会将图像的颜色进行反转,即黑色变为白色,白色变为黑色。这里的 1 表示反转的程度,数值越大,颜色变化越明显。

如果项目Web背景颜色都是浅色,可以使用 filter: invert(1) 实现 夜晚深色模式

在这里插入图片描述

7、组合使用

filter 元素可以组合使用, 例如 filter: blur(1px) brightness(160%) contrast(160%) saturate(200%) grayscale(100%) 设置 模糊 为 1px, 亮度增加 60%, 对比度增加 60%, 饱和度增加 100%, 灰度 100%

在这里插入图片描述

8、 filer 完整参数

  • brightness(0-100%):调整亮度。
  • contrast(0-100%)·:调整对比度。
  • grayscale(1):将图像转换为灰度图像。
  • invert(1):反转图像的颜色。
  • sepia(1):将图像转换为棕褐色调。
  • saturate(0-100%):调整饱和度。
  • hue-rotate(90deg):旋转色相。
  • hue-rotate(270deg):旋转两次色相。
  • hue-rotate(360deg):旋转三次色相。
  • opacity(0-1):调整透明度。

相关文章:

CSS 模糊效果 CSS 黑白效果 CSS调整亮度 对比度 饱和度 模糊效果 黑白效果反转颜色

CSS 模糊效果 CSS 黑白效果 CSS调整亮度 饱和度 模糊效果 黑白效果 实现 调整亮度 饱和度 模糊效果 黑白效果 使用 filter1、模糊2、亮度3、对比度4、饱和度5、黑白效果6、反转颜色7、组合使用8、 filer 完整参数 实现 调整亮度 饱和度 模糊效果 黑白效果 使用 filter 1、模糊…...

蓝桥杯 题库 简单 每日十题 day11

01 质数 质数 题目描述 给定一个正整数N,请你输出N以内(不包含N)的质数以及质数的个数。 输入描述 输入一行,包含一个正整数N。1≤N≤10^3 输出描述 共两行。 第1行包含若干个素数,每两个素数之间用一个空格隔开&…...

dart flutter json 转 model 常用库对比 json_serializable json_model JsonToDart

1.对比 我是一个初学者,一直跟着教材用原生的json,最近发现实在太麻烦了.所以搜索了一下,发现真的有很多现成的解决方案. 网页 https://app.quicktype.io/?ldart 这个是测试下来最好用的 有很多选项,可以使用 json_serializable 也可以不使用 json_serializable 这是推荐最…...

nginx启用了自动目录列表功能的安全漏洞修复方法

一、前言 最近被扫描到安全漏洞,说是nginx启用了自动目录列表功能,现象就是访问http://localhost/file就能看到服务器上的目录 二、修复方法 1.把nginx.conf中的autoindex on改为autoindex off location /file {alias /myuser/userfile/file;autoi…...

vector向量类使用

向量是最简单的 STL 容器,其数据结构与数组相似,占据着一个连续的内存块。 由于内存位置是连续的,所以向量中的元素可以随机访问,访问向量中任何一个元素的时间也是固定的。存储空间的管理是自动的,当要将一个元素插入…...

【Java 进阶篇】MySQL多表查询:内连接详解

MySQL是一种强大的关系型数据库管理系统,允许您在多个表之间执行复杂的查询操作。本文将重点介绍MySQL中的多表查询中的一种重要类型:内连接(INNER JOIN)。内连接用于检索满足两个或多个表之间关联条件的行,它能够帮助…...

C理解(四):链表

本文主要探讨单链表与双链表相关知识。 linux内核链表(include/linux/list.h) 内核链表中纯链表封装,纯链表的各种操作函数(节点创建、插入、删除、遍历),纯链表内嵌在驱动结构体中,实现驱动的创建、插入、删除、遍历等 单链表 单链表链表头插…...

新手教程,蛋糕小程序的搭建流程一网打尽

作为一名新手,想要搭建一个蛋糕小程序可能会觉得有些困惑。但是,不用担心!今天我将为大家详细介绍蛋糕小程序的搭建流程,并带大家一步步完成。 首先,我们需要登录乔拓云网的后台。在登录成功后,点击进入商城…...

springcloud之自我介绍

写在前面 在这篇文章 中我们分析了单体应用的问题,以及用来解决这些问题的解决的方案微服务,并接着看了微服务需要考虑的各种,如服务调用,负载均衡,服务治理,链路追踪,分布式事务,等…...

机器学习之神经网络的层次

文章目录 神经网络组成神经网络根据结构分类神经网络的信号传递 神经网络组成 大脑是一个巨大的神经元网络,所以神经网络是一个节点网络。根据节点的连接方式,可以创建多种神经网络。最常用的神经网络类型之一采用了如图所示的节点分层结构 正方形节点组…...

力扣每日一题(+日常水几道题)

每日一题1333. 餐厅过滤器 - 力扣&#xff08;LeetCode&#xff09; 简单的按规则排序,去除几个不满足的条件然后排序返回即可 #include<algorithm> class Solution { public:vector<int> filterRestaurants(vector<vector<int>>& restaurants, …...

百度SEO不稳定的原因及解决方法(百度SEO不稳定因素的5大包括)

百度SEO优化不稳定介绍&#xff1a;蘑菇号-www.mooogu.cn 随着百度SEO算法的不断变化和升级&#xff0c;许多网站的SEO排名经常出现不稳定的情况&#xff0c;这种情况在一定程度上影响了网站的流量和排名&#xff0c;导致网站的质量评分降低。因此&#xff0c;深入分析百度SEO…...

深度学习(1)---卷积神经网络

文章目录 一、发展历史1.1 CNN简要说明1.2 猫的视觉实验1.3 新认知机1.4 LeNet-51.5 AlexNet 二、卷积层2.1 图像识别特点2.2 卷积运算2.3 卷积核2.4 填充和步长2.5 卷积计算公式2.6 多通道卷积 三、池化层 一、发展历史 1.1 CNN简要说明 1. 卷积神经网络&#xff08;Convolut…...

探索社会工程的深度:从定义到高级攻击策略

在广阔的网络安全领域&#xff0c;社会工程作为一种微妙的威胁而出现&#xff0c;它利用人类的漏洞来访问敏感信息或实施欺诈。网络安全背景下的社会工程的定义很明确&#xff1a;它包括使用欺骗手段操纵个人泄露机密或个人信息&#xff0c;然后将这些信息用于欺诈目的。 此类…...

CTF 入门指南:从零开始学习网络安全竞赛

文章目录 写在前面CTF 简介和背景CTF 赛题类型介绍CTF 技能和工具准备好书推荐 写作末尾 写在前面 CTF比赛是快速提升网络安全实战技能的重要途径&#xff0c;已成为各个行业选拔网络安全人才的通用方法。但是&#xff0c;本书作者在从事CTF培训的过程中&#xff0c;发现存在几…...

Spring整合第三方框架

目录 Spring整合第三方框架 加载外部properties文件 自定义命名空间解析原理 自定义命名空间总结和案例需求 总结 案例 Spring整合第三方框架 加载外部properties文件 Spring整合第三方框架不像MyBatis那么简单了&#xff0c;例如Dubbo框架在与Spring框架整合时&#xf…...

Linux Shell 无vi获取文件某行指定内容和修改某行指定内容

注意&#xff1a;操作之前一定要先备份&#xff01;&#xff01;&#xff01;一定要先备份&#xff01;&#xff01;&#xff01;一定要先备份&#xff01;&#xff01;&#xff01; 1. 获取某配置文件中某一行某项的值 cat /sshd_config |grep "PermitRootLogin" …...

在EXCEL中构建加载项之创建加载项的目的及规范要求

【分享成果&#xff0c;随喜正能量】一句南无阿弥陀佛&#xff0c;本是释迦牟尼佛所证的无上正等正觉法&#xff0c;洒在娑婆世界的众生海中&#xff0c;只为末世众生能够以信愿之心抓住此救命稻草&#xff0c;要知道今世人此生的处境&#xff0c;可能只剩这道要么极乐要么三涂…...

Hive【Hive(三)查询语句】

前言 今天是中秋节&#xff0c;早上七点就醒了&#xff0c;干啥呢&#xff0c;大一开学后空教室紧缺&#xff0c;还不趁着假期来学校等啥呢。顺便偷偷许个愿吧&#xff0c;希望在明年的这个时候&#xff0c;秋招不知道赶不赶得上&#xff0c;我希望拿几个国奖&#xff0c;蓝桥杯…...

商场做小程序商城的作用是什么?

商场是众多商家聚集在一起的购物公共场所&#xff0c;大商场也往往入驻着众多行业商家&#xff0c;是每个城市重要的组成部分。 随着互联网电商深入及客户消费行为改变&#xff0c;不少商场如今的客流量非常有限&#xff0c;甚至可以说是员工比客人多&#xff0c;这就导致撤店…...

XPD738协议系列-USB Type-C PD 和 Type-A 双口控制器

产品描述&#xff1a; XPD738 是一款集成 USB Type-C、USB Power Delivery&#xff08;PD&#xff09;2.0/3.0 以及 PPS、QC3.0/QC3.0/QC2.0 快充协议、华为 FCP/SCP/HVSCP 快充协议、三星 AFC 快充协议、BC1.2 DCP 以及苹果设备 2.4A 充电规范的多功能 USB Type-C 和 Type-A …...

【面试八股】IP协议八股

IP协议八股 子网掩码的作用为什么IP协议需要分片IP协议什么时候需要分片IP协议是怎么进行分片的那么IP协议是如果进行标识属于同一个分片呢&#xff1f;TCP协议和UDP协议将数据交给IP协议之后&#xff0c;是否需要分片传输&#xff1f; 子网掩码的作用 用来标识网络号和主机号…...

【冰糖R语言】创建R包(打包R程序)

目标&#xff1a;将现有R程序打包 可能涉及知识点&#xff1a;devtools包、usethis包、Rstudio软件 一、R包的类型 通常一个R包中包含以下元素&#xff1a; 1&#xff09;R文件夹&#xff1a;函数代码 2&#xff09;man文件夹&#xff1a;存放每个函数的注释文件 3&#x…...

照片后期处理软件DxO FilmPack 6 mac中文说明

DxO FilmPack 6 for Mac是一款照片后期处理软件。它可以模拟超过60种著名胶片品牌和类型的色彩和颗粒感&#xff0c;使照片具有复古、艺术和时尚风格。 ​DxO FilmPack 6 mac支持RAW和JPG格式的照片&#xff0c;并提供丰富的调整选项&#xff0c;如亮度、对比度、曝光、阴影和高…...

51单片机音乐闹钟秒表倒计时整点报时多功能电子钟万年历数码管显示( proteus仿真+程序+原理图+报告+讲解视频)

51单片机音乐闹钟秒表倒计时整点报时多功能电子钟万年历数码管显示( proteus仿真程序原理图报告讲解视频&#xff09; 讲解视频1.主要功能&#xff1a;2.仿真3. 程序代码4.原理图5. 设计报告6. 设计资料内容清单 51单片机音乐闹钟秒表倒计时整点报时多功能电子钟万年历数码管显…...

Scala第九章节

Scala第九章节 scala总目录 章节目标 理解包的相关内容掌握样例类, 样例对象的使用掌握计算器案例 1. 包 实际开发中, 我们肯定会遇到同名的类, 例如: 两个Person类. 那在不改变类名的情况下, 如何区分它们呢? 这就要使用到包(package)了. 1.1 简介 包就是文件夹, 用关…...

arduino - UNO-R3,mega2560-R3,NUCLEO-H723ZG的arduino引脚定义区别

文章目录 arduino - UNO-R3,mega2560-R3,NUCLEO-H723ZG的引脚定义区别概述笔记NUCLEO-H723ZGmega2560-R3UNO-R3经过比对, 这2个板子(NUCLEO-H723ZG, mega2560-R3)都是和UNO-R3的arduino引脚定义一样的.mega2560-r3和NUCLEO-H723ZG的区别补充arduino uno r3的纯数字IO和模拟IO作…...

提取多个txt数据并合成excel——例子:与中国建交的国家

提取多个txt数据并合成excel——例子&#xff1a;与中国建交的国家 一、概要二、整体架构流程三、完整代码 一、概要 这段代码主要执行以下任务&#xff1a; 1. 定义辅助函数&#xff1a;首先&#xff0c;定义了两个辅助函数。has_chinese_chars函数用于检查给定的字符串中是否…...

uni-app:js修改元素样式(宽度、外边距)

效果 代码 1、在<view>元素上添加一个ref属性&#xff0c;用于在JavaScript代码中获取对该元素的引用&#xff1a;<view ref"myView" id"mybox"></view> 2、获取元素引用 &#xff1a;const viewElement this.$refs.myView.$el; 3、修改…...

day36-单元测试

1. 单元测试Junit 1.1 什么是单元测试&#xff1f;&#xff08;掌握&#xff09; 对部分代码进行测试。 1.2 Junit的特点&#xff1f;&#xff08;掌握&#xff09; 是一个第三方的工具。&#xff08;把别人写的代码导入项目中&#xff09;&#xff08;专业叫法&#xff1a;…...

权威的赣州网站建设/网络精准推广

彬哥哥给了个很不错的网址http://wenda.hiall.com.cn&#xff0c;上去做几道题感觉就是细节呀&#xff0c;各种细节&#xff0c;也许没有真正开发过软件的我不太注意这些细节&#xff0c;但细节决定代码的质量&#xff0c;代码决定软件的性能&#xff0c;就当扫盲好好练练吧。 …...

用电脑怎么做原创视频网站/网络推广网站排名

电动化、自动驾驶以及汽车电子业务&#xff0c;已经是传统汽车零部件制造商必须选择的道路。而在过去几年时间&#xff0c;博世、大陆、采埃孚等巨头已经率先进行战略调整。 近日&#xff0c;马瑞利&#xff08;Marelli&#xff09;公司宣布将对旗下面向未来新技术业务板块的负…...

网站怎么做的有创意/百度安全中心

现在项目有需要对数据进行脱敏处理&#xff0c;要求保留前三位和最后四位&#xff0c;中间对用*处理。如18912341234脱敏处理之后应该变成189****1234。处理方法如下&#xff1a;var str"18912341234"var pat/(\d{3})\d*(\d{4})/var bstr.replace(pat,$1****$2);cons…...

网站维护费计入什么科目/搜索量排名

2019独角兽企业重金招聘Python工程师标准>>> 1. 系统日志 tail -f /var/log/messages Apr 18 11:21:56 web5 kernel: possible SYN flooding on port 80. Sending cookies. 2.检查连接数 netstat -n | awk /^tcp/ {S[$NF]} END {for(a in S) print a, S[a]} TIME_W…...

石家庄站建设费用多少/天津疫情最新消息

二叉树是n(n>0)个结点的有限集合&#xff0c;该集合或者为空集&#xff08;称为空二叉树&#xff09;&#xff0c;或者由一个根结点和两棵互不相交的、分别称为根结点的左子树和右子树组成。 还有一些右斜树 左斜树 满二叉树 完全二叉树之类的 这篇文章 记录 1.二叉树建立…...

手机网站开发计划/seo推广是什么意思

#define&#xff0c;typedef&#xff0c;struct&#xff0c;enmu是我们阅读单片机底层代码时最经常碰到几个概念。 首先分开解释一下 宏定义#define与定义别名typedef&#xff0c;它俩一起说&#xff0c;因为它俩的功能十分相似&#xff0c;具体的的用法不说了&#xff0c;注…...