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，一经查实，立即删除！

相关文章

编译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)全局作用域局部作用域变量的访问原则垃圾回收机制闭包 匿名函数函数表达式立即执行函数 箭头函数箭头…
阅读更多...
【机器学习】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灵感来自于…
阅读更多...
小试牛刀-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…
阅读更多...
Pinia：Vue 2 和 Vue 3 中更好用的状态管理框架

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

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

微信小程序 调色板

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

九、函数的声明和定义

函数声明&#xff1a; 1. 告诉编译器有一个函数叫什么&#xff0c;参数是什么&#xff0c;返回类型是什么。但是具体是不是存在&#xff0c;函数 声明决定不了。 2. 函数的声明一般出现在函数的使用之前。要满足先声明后使用。 3. 函数的声明一般要放在头文件中的。 定义的函…
阅读更多...
股价持续低迷，业绩颓势不减，冀光恒难救平安银行？

股价持续低迷，业绩颓势不减，冀光恒难救平安银行？

文&#xff5c;新熔财经 作者&#xff5c;宏一 周一一上班&#xff0c;就听到旁边的同事感慨今年股市行情很不错&#xff0c;尤其是银行股&#xff0c;上半年累计上涨了17.02%&#xff0c;是涨幅最大的板块。 听到这里&#xff0c;我美滋滋地打开自己的账户&#xff0c;结…
阅读更多...
spdlog一个非常好用的C++日志库(四): 源码分析之logger类

spdlog一个非常好用的C++日志库(四): 源码分析之logger类

目录 1.简介 2.类图关系 3.logger数据成员 4.logger函数成员 4.1.构造与析构 4.1.1.构造函数 4.1.2.拷贝构造、移动构造 4.2.交换操作 4.3.log()记录日志消息 4.3.1.格式串 4.3.2.普通字符串 4.3.3.日志级别 4.3.4.宽字符支持 4.4.sink_it_&#xff1a;将log消息…
阅读更多...
PLC工作原理

PLC工作原理

PLC&#xff08;可编程逻辑控制器&#xff09;的工作原理简述为&#xff1a;集中采样、集中输出、周期性循环扫描。 西门子PLC 一、集中采样 顺序读取所有输入端子的通断状态&#xff0c;并将所读取的信息存到输入映像寄存器中&#xff0c;此时输入映像寄存器被刷新&#xff…
阅读更多...
三坐标测量机：柔性生产制造中的高精度测量解决方案

三坐标测量机：柔性生产制造中的高精度测量解决方案

柔性生产制造是制造业的核心竞争力之一。它强调生产线的灵活性和适应性&#xff0c;以满足市场对产品多样化和个性化的需求。在当今快速变化的工业环境中&#xff0c;随着消费者对产品个性化和定制化需求的增加&#xff0c;柔性生产制造和三坐标测量机的结合&#xff0c;为智能…
阅读更多...
尽量不写一行if...elseif...写出高质量可持续迭代的项目代码

尽量不写一行if...elseif...写出高质量可持续迭代的项目代码

背景 无论是前端代码还是后端代码&#xff0c;都存在着定位困难&#xff0c;不好抽离&#xff0c;改造困难的问题&#xff0c;造成代码开发越来越慢&#xff0c;此外因为代码耦合较高&#xff0c;总是出现改了一处地方&#xff0c;然后影响其他地方&#xff0c;要么就是要修改…
阅读更多...
通讯录（C语言详细版）

通讯录（C语言详细版）

1. 前言 通讯录是在动态顺序表的基础上实现的&#xff0c;其实就是顺序表的每个元素存储的不再是数字&#xff0c;而是存储一个联系人的结构体&#xff0c;所以如果有些小伙伴看不懂的话&#xff0c;可以移步参考一下动态顺序表的实现&#xff1a;顺序表&#xff08;C语言详细…
阅读更多...
【C语言】auto 关键字

【C语言】auto 关键字

在C语言中&#xff0c;auto关键字用于声明局部变量&#xff0c;但它的使用已经变得很少见。事实上&#xff0c;从C99标准开始&#xff0c;auto关键字的默认行为就是隐含的&#xff0c;因此在大多数情况下无需显式使用它。 基本用法 在C语言中&#xff0c;auto关键字用于指定变…
阅读更多...
SpringBoot应用配置桥接Prometheus入门

SpringBoot应用配置桥接Prometheus入门

SpringBoot应用配置Prometheus步骤 SpringBoot应用依赖要求PrometheusGrafanaGrafana监控界面模板 SpringBoot应用依赖要求 <!-- 监控系统健康情况的工具 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023