CSS filter（滤镜）属性，并实现页面置灰效果

目录

一、filter（滤镜）属性

二、准备工作

三、常用的filter属性值

1、blur(px)

2、brightness(%)

3、contrast(%)

4、grayscale(%)

5、opacity(%)

6、saturate(%)

7、sepia(%)

8、invert(%)

9、hue-rotate(deg)

10、drop-shadow(h-shadow v-shadow blur spread color)

四、网站置灰效果

一、filter（滤镜）属性

CSS 中的filter属性，用来设置元素的模糊度、灰度、对比度、透明度等视觉效果；

二、准备工作

准备一个html页面，用来编码测试；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.img-box {display: inline-block;margin-top: 20px;margin-left: 100px;}.image{width: 200px;}/* 效果图样式 */.img-test{}</style>
</head><body><div class="img-box"><h4>原图</h4><img class="image" src="D:\test\girl.png"  alt=""></div><div class="img-box"><h4>效果图</h4><img class="image img-test" src="D:\test\girl.png" alt=""></div>
</body></html>

在页面中放两个相同的图片；

通过测试图与原图的对比，可以更加清楚的观察设置了各种filter属性值的效果；

三、常用的filter属性值

序号

属性值

描述
1none默认值，不设置任何效果；
2initial设置为默认值；
3inherit继承父元素的该属性值
4blur(px)

设置图像的高斯模糊；

5brightness(%)设置图像的亮度；
6contrast(%)设置图像的对比度；
7grayscale(%)设置图像灰度；
8opacity(%)设置图像的透明度；
9saturate(%)设置图像的饱和度；
10sepia(%)设置图像的深褐色转换比例；
11invert(%)设置图像的反转比例；
12hue-rotate(deg)设置图像的色相旋转；
13drop-shadow(h-shadow v-shadow blur spread color)设置图像阴影效果；

1、blur(px)

该函数用来设置图像的高斯模糊效果； 

  • 默认值为0（无变化）；
  • 值越大，图像越模糊；
  • 不接受百分比；
/* 效果图样式 */
.img-test{/* 1、设置高斯模糊 */-webkit-filter: blur(3px); /* Chrome, Safari, Opera */filter: blur(3px);
}

/* 效果图样式 */
.img-test{/* 1、设置高斯模糊 */-webkit-filter: blur(6px); /* Chrome, Safari, Opera */filter: blur(6px);
}

2、brightness(%)

该函数用来设置图像的亮度，使其看起来更亮或更暗；

  • 默认值为100%（无变化）；
  • 值越大，图像亮度越高；
  • 值是0%，图像会全黑；
  • 值超过100%，图像会比原来更亮；
/* 效果图样式 */
.img-test{/* 2、设置亮度 */-webkit-filter: brightness(60%); /* Chrome, Safari, Opera */filter:brightness(60%)
}

/* 效果图样式 */
.img-test{/* 2、设置亮度 */-webkit-filter: brightness(120%); /* Chrome, Safari, Opera */filter:brightness(120%)
}

3、contrast(%)

该函数用来设置图像的对比度；

  • 默认值100%（无变化）；
  • 值越大，对比度越低；
  • 值是0%，图像会全黑；
  • 值超过100%，对比度会比原来的更低；
/* 效果图样式 */
.img-test{/* 3、设置图片对比度 */-webkit-filter: contrast(60%); /* Chrome, Safari, Opera */filter: contrast(60%);
}

/* 效果图样式 */
.img-test{/* 3、设置图片对比度 */-webkit-filter: contrast(120%); /* Chrome, Safari, Opera */filter: contrast(120%);
}

4、grayscale(%)

该函数用来设置图像的灰度，定义图像灰度的转换比例；

  • 默认值为0（无变化）；
  • 取值在0%到100%之间；
  • 值越大，灰度效果越明显；
  • 值是100%，则完全转换为灰度图像；
/* 效果图样式 */
.img-test{/* 4、设置图像灰度 */-webkit-filter: grayscale(60%); /* Chrome, Safari, Opera */filter:grayscale(60%)
}

/* 效果图样式 */
.img-test{/* 4、设置图像灰度 */-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */filter:grayscale(100%)
}

5、opacity(%)

该函数用来设置图像的透明程度，定义图像透明度的转换比例；

  • 默认值为100%（无变化）；
  • 取值在0%到100%之间；
  • 值越小，透明程度越明显；
  • 值为0%，则完全透明；
/* 效果图样式 */
.img-test{/* 5、设置图像的透明度 */-webkit-filter: opacity(20%); /* Chrome, Safari, Opera */filter: opacity(20%);
}

/* 效果图样式 */
.img-test{/* 5、设置图像的透明度 */-webkit-filter: opacity(60%); /* Chrome, Safari, Opera */filter: opacity(60%);
}

6、saturate(%)

该函数用来设置图像的饱和度，定义图像饱和度的转换比例；

  • 默认值为100%（无变化）；
  • 值越小，饱和度越低，反之，饱和度越高；
  • 值为0%，则完全不饱和；
  • 值可以超过100%，设置更高的饱和度；
/* 效果图样式 */
.img-test{/* 6、设置图像的饱和度 */-webkit-filter: saturate(60%); /* Chrome, Safari, Opera */filter: saturate(60%);
}

/* 效果图样式 */
.img-test{/* 6、设置图像的饱和度 */-webkit-filter: saturate(160%); /* Chrome, Safari, Opera */filter: saturate(160%);
}

7、sepia(%)

该函数用来设置图像转换为深褐色的转换比例；

  • 默认值为0%（无变化）；
  • 取值在0%-100%之间；
  • 值越大，转换为深褐色的程度越大；
  • 值为100%，则完全是深褐色；
/* 效果图样式 */
.img-test{/* 7、设置图像转换为深褐色的比例 */-webkit-filter: sepia(40%); /* Chrome, Safari, Opera */filter:sepia(40%);
}

/* 效果图样式 */
.img-test{/* 7、设置图像转换为深褐色的比例 */-webkit-filter: sepia(80%); /* Chrome, Safari, Opera */filter:sepia(80%);
}

8、invert(%)

该函数用来设置图像的反转比例；

  • 默认值为0%（无变化）；
  • 取值在0%-100%之间；
  • 值越大，图像反转的比例越大；
  • 值为100%，则图像完全反转；
/* 效果图样式 */
.img-test{/* 8、设置图像的反转比例 */-webkit-filter: invert(40%); /* Chrome, Safari, Opera */filter:invert(40%);
}

/* 效果图样式 */
.img-test{/* 8、设置图像的反转比例 */-webkit-filter: invert(80%); /* Chrome, Safari, Opera */filter:invert(80%);
}

9、hue-rotate(deg)

该函数用来设置图像的色相旋转，设定图像会被调整的色环角度值；

  • 默认值为0deg（无变化）；
  • 没有最大值，超过360的值相当于多旋转一圈；
  • 相当于图像的色相为，原值色值在色轮上旋转指定角度后得到的新值；

/* 效果图样式 */
.img-test{/* 9、设置图像的旋转色相 */-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */filter: hue-rotate(90deg);
}

/* 效果图样式 */
.img-test{/* 9、设置图像的旋转色相 */-webkit-filter: hue-rotate(180deg); /* Chrome, Safari, Opera */filter: hue-rotate(180deg);
}

/* 效果图样式 */
.img-test{/* 9、设置图像的旋转色相 */-webkit-filter: hue-rotate(270deg); /* Chrome, Safari, Opera */filter: hue-rotate(270deg);
}

/* 效果图样式 */
.img-test{/* 9、设置图像的旋转色相 */-webkit-filter: hue-rotate(360deg); /* Chrome, Safari, Opera */filter: hue-rotate(360deg);
}

10、drop-shadow(h-shadow v-shadow blur spread color)

该函数用来设置图像的阴影效果；

  • h-shadow：设置水平方向阴影的偏移量，如果为负数，则阴影会出现在元素左边；
  • y-shadow：设置垂直方向阴影的偏移量，如果为负数，则阴影会出现在元素上方；
  • blur：设置阴影的模糊距离，值越大，越模糊；默认值为0，不允许为负；
  • spread：设置阴影的大小，正值会使阴影变大，负值会是阴影变小，默认值为0；
  • color：设置阴影的颜色；

注意：一些浏览器不支持spread属性，加了也不会渲染；

/* 效果图样式 */
.img-test{/* 10、设置图像阴影 */-webkit-filter: drop-shadow(0 0 6px #409eff); /* Chrome, Safari, Opera */filter: drop-shadow(0 0 6px #409eff);
}

/* 效果图样式 */
.img-test{/* 10、设置图像阴影 */-webkit-filter: drop-shadow(6px 6px 10px yellowgreen); /* Chrome, Safari, Opera */filter: drop-shadow(6px 6px 10px yellowgreen);
}

四、网页置灰效果

在一些特殊时间，会看到很多网站都置灰了；这种效果使怎么实现的？？？

其实很简单，只需要一个属性就可以了！！！

/* 将整个网页置灰 */
html {filter: grayscale(100%);
}

 就拿CSDN网站为例（仅仅只是为了示范，绝无其他意图！）

【CSDN首页】原始效果：

【CSDN首页】置灰效果：

测试方法：

=========================================================================

每天进步一点点~！

快来试试这个友好的CSS属性吧~

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

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

相关文章

嵌入式软件的中断测试

嵌入式软件的中断测试

嵌入式软件中断测试是确保嵌入式系统可靠性和稳定性的重要环节。中断是嵌入式系统中常见的一种机制&#xff0c;用于处理外部事件或系统内部的紧急任务。由于中断的实时性和并发性&#xff0c;中断测试对于发现潜在的软件缺陷和确保系统按预期响应中断至关重要。 嵌入式软件中…
阅读更多...
编译rust程序，并让它依赖低版本的GLIBC库

编译rust程序，并让它依赖低版本的GLIBC库

在linux环境下编译rust程序，编译好的程序会依赖你当前系统的GLIBC库，也就是说你的程序无法在使用更低版本GLIBC库的linux系统中运行。 查看当前系统的GLIBC版本： strings /lib64/libc.so.6 | grep GLIBC 为了让编译的程序依赖比较低版本的GLIBC库，我们最好在centos7下编译…
阅读更多...
JavaScript基础-函数（完整版）

JavaScript基础-函数（完整版）

文章目录 函数基本使用函数提升函数参数arguments对象&#xff08;了解&#xff09;剩余参数(重点)展开运算符(...) 逻辑中断函数参数-默认参数函数返回值-return作用域(scope)全局作用域局部作用域变量的访问原则垃圾回收机制闭包 匿名函数函数表达式立即执行函数 箭头函数箭头…
阅读更多...
vite typescript 配置跨域代理

vite typescript 配置跨域代理

打开工程目录下vite.config.ts文件 export default defineConfig({plugins: [vue(), topLevelAwait()],resolve: { alias },server:{proxy:{/api:{ //对以 /api 开头的请求跨域处理target:http://xxx.xxx.cn,//目标服务器changeOrigin: true,rewrite:(path)>{return path.…
阅读更多...
软件测试面试题：怎么优化SQL的查询速度？

软件测试面试题：怎么优化SQL的查询速度？

索引优化&#xff1a;确保查询中用到的字段上有合适的索引。索引可以显著加快数据检索速度&#xff0c;但也要注意不要过度索引&#xff0c;因为索引虽然可以加快查询速度&#xff0c;但会降低更新表的速度。 查询语句优化&#xff1a;避免使用SELECT *&#xff0c;尽量指定需…
阅读更多...
【机器学习】Google开源大模型Gemma2：原理、微调训练及推理部署实战

【机器学习】Google开源大模型Gemma2：原理、微调训练及推理部署实战

目录 一、引言 二、模型简介 2.1 Gemma2概述 2.2 Gemma2 模型架构 三、训练与推理 3.1 Gemma2 模型训练 3.1.1 下载基座模型 3.1.2 导入依赖库 3.1.3 量化配置 3.1.4 分词器和模型实例化 3.1.5 引入PEFT进行LORA配置 3.1.6 样本数据清洗与加载 3.1.7 模型训练与保…
阅读更多...
SCI一区TOP|徒步优化算法（HOA）原理及实现【免费获取Matlab代码】

SCI一区TOP|徒步优化算法（HOA）原理及实现【免费获取Matlab代码】

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2024年&#xff0c;SO Oladejo受到徒步旅行启发&#xff0c;提出了徒步优化算法&#xff08;Hiking Optimization Algorithm, HOA&#xff09;。 2.算法原理 2.1算法思想 HOA灵感来自于…
阅读更多...
vue3 websocket连接上了，会自动断开的处理的二种方式

vue3 websocket连接上了，会自动断开的处理的二种方式

上了服务器以后&#xff0c;发现websocket会自动断开&#xff0c;那么我们可以有二种方法&#xff1a; 1&#xff09;一般我们会发送心跳包 function sendMessagePing() {if (websocket && websocket.readyState WebSocket.OPEN) {websocket.send(ping);} else {con…
阅读更多...
小试牛刀-Solana合约账户详解

小试牛刀-Solana合约账户详解

目录 一.Solana 三.账户详解 3.1 程序账户 3.2 系统所有账户 3.3 程序派生账户(PDA) 3.4 Token账户 四、相关学习文档 五、在线编辑器 Welcome to Code Blocks blog 本篇文章主要介绍了 [Solana合约账户详解] ❤博主广交技术好友&#xff0c;喜欢文章的可以关注一下❤ …
阅读更多...
【人工智能】--生成对抗网络

【人工智能】--生成对抗网络

个人主页&#xff1a;欢迎来到 Papicatch的博客 课设专栏 &#xff1a;学生成绩管理系统 专业知识专栏&#xff1a; 专业知识 文章目录 &#x1f349;引言 &#x1f349;GAN 的基本原理 &#x1f348;生成器&#xff08;Generator&#xff09; &#x1f348;判别器&…
阅读更多...
sql语句练习注意点

sql语句练习注意点

1、时间可以进行排序&#xff0c;也可以用聚合函数对时间求最大值max&#xff08;时间&#xff09; 例如下面的例子&#xff1a;取最晚入职的人&#xff0c;那就是将入职时间倒序排序&#xff0c;然后limit 1 表&#xff1a; 场景&#xff1a;查找最晚入职员工的所有信息 se…
阅读更多...
docker compose方式部署Zabbix 7.0 LTS

docker compose方式部署Zabbix 7.0 LTS

docker compose方式部署 Zabbix 7.0 LTS Zabbix 由几个主要的功能组件组成 zabbix-server 是 Zabbix agent 向其报告可用性、系统完整性信息和统计信息的核心组件。zabbix-agent 部署在被监控目标上&#xff0c;用于主动监控本地资源和应用程序&#xff0c;并将收集的数据发送…
阅读更多...
Miniconda安装教程

Miniconda安装教程

文章目录 Conda和Miniconda的区别一、安装 Miniconda 1、创建目录2、下载 Miniconda&#xff08;Python3 版本&#xff09;3、安装 Miniconda4、取消默认进入conda&#xff08;base&#xff09;环境5、配置 conda 国内镜像 二、创建 Python3.8 环境 1、创建指令2、激活 py38 环…
阅读更多...
Pinia：Vue 2 和 Vue 3 中更好用的状态管理框架

Pinia：Vue 2 和 Vue 3 中更好用的状态管理框架

前言 还在用Vuex? 在Vue应用程序的开发过程中&#xff0c;高效且易于维护的状态管理一直是开发者关注的核心问题之一。随着Vue 3的发布&#xff0c;状态管理领域迎来了一位新星——Pinia&#xff0c;它不仅为Vue 3量身打造&#xff0c;同时也向下兼容Vue 2&#xff0c;以其简…
阅读更多...
ios调用高德地图定位报错

ios调用高德地图定位报错

错误信息如下&#xff1a; Thread Performance Checker: Thread running at User-interactive quality-of-service class waiting on a lower QoS thread running at Default quality-of-service class. Investigate ways to avoid priority inversions PID: 1668, TID: 1538…
阅读更多...
PostgreSQL 在Windows下保姆级图文安装教程

PostgreSQL 在Windows下保姆级图文安装教程

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 &#x1f913; 同时欢迎大家关注其他专栏&#xff0c;我将分享Web前后端开发、人工智能、机器学习、深…
阅读更多...
The Plant Cell：DAP-seq技术助力揭示MdWRKY75调控苹果耐热性的分子机制

The Plant Cell：DAP-seq技术助力揭示MdWRKY75调控苹果耐热性的分子机制

2024年6月12日&#xff0c;西北农林科技大学作物抗逆与高效生产全国重点实验室/园艺学院苹果抗逆与品质改良创新团队马锋旺教授/李超课题组在植物学知名期刊The Plant Cell&#xff08;影响因子10&#xff09;在线发表了题为“The MdHSC70-MdWRKY75 module mediates basal appl…
阅读更多...
定个小目标之刷LeetCode热题（35）

定个小目标之刷LeetCode热题（35）

155. 最小栈 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void pop() 删除堆栈顶部的元素。int top() 获取堆栈顶部的…
阅读更多...
heapq.nlargest函数

heapq.nlargest函数

函数解释 heapq.nlargest(n, iterable, keyNone) 该函数用于从可迭代对象iterable中返回前n个最大的元素。它的参数包括&#xff1a; n&#xff1a;要返回的最大元素的数量iterable&#xff1a;要从中查找最大元素的可迭代对象key&#xff1a;一个函数&#xff0c;用于从每个…
阅读更多...
微信小程序 调色板

微信小程序 调色板

注意&#xff1a;是在uniapp中直接使用的一个color-picker插件&#xff0c;改一下格式即可在微信小程序的原生代码中使用 https://github.com/KirisakiAria/we-color-picker 这是插件的地址&#xff0c;使用的话先把这个插件下载下来&#xff0c;找到src&#xff0c;在项目创…
阅读更多...
最新文章

Copyright @ 2022~2023