CSS常用滤镜效果

CSS 提供了多种滤镜效果,可以通过 filter 属性应用于 HTML 元素。以下是一些常用的 CSS 滤镜效果:

一、灰度 (Grayscale)

将图像转换为灰度图像。值在 0%(原始图像)和 100%(完全灰度)之间。

filter: grayscale(100%);

二、色相旋转 (Hue-rotate)

给图像应用色相旋转。值以度为单位。

filter: hue-rotate(90deg);

三、饱和度 (Saturate)

增加或减少图像的饱和度。值在 0%(完全不饱和)和 100%(原始图像)之间,也可以超过 100%(更饱和)。

filter: saturate(3); /* 增加饱和度 */
filter: saturate(0.5); /* 减少饱和度 */

四、亮度 (Brightness)

增加或减少图像的亮度。值在 0%(黑色)和 100%(原始图像)之间,也可以超过 100%(更亮)。

filter: brightness(2); /* 增加亮度 */
filter: brightness(0.5); /* 减少亮度 */

五、对比度 (Contrast)

增加或减少图像的对比度。值在 0%(灰色)和 100%(原始图像)之间,也可以超过 100%(更高对比度)。

filter: contrast(200%); /* 增加对比度 */
filter: contrast(50%); /* 减少对比度 */

六、反转 (Invert)

反转图像的颜色。值在 0%(原始图像)和 100%(反转颜色)之间。

filter: invert(100%);

七、模糊 (Blur)

给图像应用模糊效果。

filter: blur(5px);

 八、透明度 (Opacity)

请注意,虽然 filter: opacity() 是存在的,但通常我们使用 opacity 属性本身来更改元素的透明度。不过,filter: opacity() 与 opacity 属性稍有不同,因为它不会影响元素下的其他元素。

filter: opacity(50%);

给图像添加阴影效果。这与 box-shadow 类似,但 filter: drop-shadow() 不会影响元素的布局。

九、阴影 (Drop-shadow)

对图像应用阴影效果,与 box-shadow 类似,但不会影响布局。

filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));

十、多种滤镜组合 

你可以在一个元素上应用多个滤镜,只需用空格分隔它们即可。

filter: grayscale(50%) brightness(1.5) contrast(2);

十一、毛玻璃效果backdrop-filter 

.box {background-color: rgba(255, 255, 255, 0.3);border-radius: 5px;font-family: sans-serif;text-align: center;line-height: 1;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);max-width: 50%;max-height: 50%;padding: 20px 40px;
}

十二、类似老照片(sepia tone)的色调效果 sepia

将图像转换为棕褐色。值在 0%(原始图像)和 100%(完全棕褐色)之间

请注意,滤镜效果可能会消耗较多的计算资源,特别是在移动设备上。因此,在使用它们时应该谨慎考虑性能和用户体验。兼容性问题: https://caniuse.com/  查询

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

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

相关文章

qt信号和槽之间传送其他数据类型

提交信号和接受槽文件里分别全局声明该结构 Q_DECLARE_METATYPE (can) 在提交信号的时候将该数据结构set到QVariant里 在槽的接收里 ,直接.value强转为声明的自定义结构里 void MainWindow::canrecvdeal(QVariant sy)//CAN_FRAME_MAG v { CAN_FRAME_MAG v; vsy.valu…

android进阶-回调

回调(Callback)是一种常见的编程模式,用于处理异步事件或信息传递。通过回调,一个对象(通常是一个事件的发起者或处理者)可以将某些任务或行为的执行通知给另一个对象 常见例子: 事件监听器&a…

Next.js+TS项目中的错误边界处理与渲染降级实践

在开发基于Next.js的TypeScript应用程序时,我们经常会遇到一些意料之外的JavaScript错误,这些错误可能会导致页面直接白屏,严重影响用户体验。为了提升应用的健壮性和用户体验,引入ErrorBoundary组件是一种非常有效的策略。本文将…

【回溯 栈 代数系统 动态规划】282. 给表达式添加运算符

本文涉及知识点 回溯 栈 代数系统 动态规划 LeetCode 282. 给表达式添加运算符 给定一个仅包含数字 0-9 的字符串 num 和一个目标值整数 target ,在 num 的数字之间添加 二元 运算符(不是一元)、- 或 * ,返回 所有 能够得到 ta…

Rust 中的声明可见性

Rust 中的声明可见性 在 Rust 编程语言中,声明可见性是一个核心概念,它决定了代码中的项(如函数、结构体、枚举等)在哪些范围内可以被访问。Rust 通过一套严谨的规则来控制这些可见性,以确保代码的安全性和封装性。下…

Ngnix VTS模块添加和测试

目录 VTS模块介绍 上传软件包xftp/lrzsz 执行脚本 添加vts的配置 测试 测试:nginx.conf配置文件是否有语法错误 测试:windows机器上访问效果 VTS模块介绍 Nginx VTS模块(nginx Virtual Host Traffic Status Module)是一个第三…

【C++初阶】string模拟实现

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ 🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿&#x1…

【精读Yamamoto】方向性连接如何丰富神经网络的功能复杂度 | 体外神经元培养实验 | 脉冲神经元模型(SNN) | 状态转移模型

探索大脑的微观世界:方向性连接如何丰富神经网络的功能复杂度 在神经科学领域,理解大脑如何通过其复杂的网络结构实现高级功能一直是一个核心议题。最近,一项由Nobuaki Monma和Hideaki Yamamoto博士领导的研究为我们提供了新的视角&#xff…

cuttag学习笔记

由于课题可能用上cut&tag这个技术,遂跟教程学习一波,记录一下以便后续的学习(主要是怕忘了) 教程网址cut&tag教程 背景知识:靶标下裂解与标记(Cleavage Under Targets & Tagmentation&#xf…

什么是跨境物流管理系统,它有什么功能

对于从事跨境物流的物流商来说,提升物流效率是一直都需要考虑的问题。不过不用担心,跨境物流系统(TMS)是个不错的解决方案。 谁应该使用跨境物流管理系统? 可以说,跨境物流系统最大的特点就是使用上的灵活性…

90后医生下班摆摊就能赚1500?看内行人是如何分析的?2024普通人逆袭的机会,2024普通人想翻身的风口行业

“在自己空余的时间,做点自己喜欢的事情”这就是浙江义乌的王医生,摆摊被采访时的回答。王大夫说,自己兼职已经有半年多了,每天的营业额能达到1500元。同时王医生表示,自己的目标是开一间自己的小店。 看到这里&#x…

新版Idea配置仓库教程

这里模拟的是自己搭建的本地仓库环境,基于虚拟机搭建利用gogs创建的仓库 1、Git环境 你需要准备好git和仓库可以使用github 、gitee等 1.1 拉取代码 本项目使用 Git 进行版本控制,在 gogs 上创建一个个人使用的 git 仓库: http://192.168.…

1.5.2 基于XML配置方式使用Spring MVC

用户登录演示效果 实战概述,可以帮助你更好地理解整个流程。 项目创建 创建了一个名为 SpringMvcDemo01 的 Jakarta EE 项目。通过 Maven 添加了项目所需的依赖,包括 Spring MVC、JSTL 等。 视图层页面 创建了登录页面(login.jsp&#xff0…

计算机毕业设计springboot体育馆场地预约管理系统【附源码】

计算机毕业设计springboot体育馆场地预约管理系统[附源码] 🍅 作者主页 网顺技术团队 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 文末获取源码联系方式 📝 🍅 查看下方微信号获取联系方式 承接各种定制…

良心实用的电脑桌面便利贴,好用的便利贴便签小工具

在日常办公中,上班族经常需要记录临时任务、重要提醒或者突发的灵感。比如,在紧张的项目会议中,忽然想到一个改进的点子,或者是在处理邮件时,需要记下对某个客户的回复要点。在这些场景下,如果能直接在电脑…

基于SpringBoot+Vue的物流管理系统

运行截图 获取方式 Gitee仓库

Gitee添加仓库成员

1.进入你的项目 2.点击管理 3.左侧有个仓库管理 4.要加哪个加哪个,有三个方式~ 可以直接添加之前仓库合作过的开发者

In Context Learning(ICL)个人记录

In Context Learning(ICL)简介 In Context Learning(ICL)的关键思想是从类比中学习。上图给出了一个描述语言模型如何使用 ICL 进行决策的例子。首先,ICL 需要一些示例来形成一个演示上下文。这些示例通常是用自然语言…

react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)

技术要点 动态样式 className{tabItem ${currentType item.value && "active"}}安装 lodash npm i --save lodash使用 lodash 对对象数组排序(不会改变源数组) _.orderBy(dataList, "readNum", "desc")src\De…

ArcGIS10.2系列许可到期解决方案

本文手机码字,不排版了。 昨晚(2021\12\17)12点后,收到很多学员反馈 ArcGIS10.2系列软件突然崩溃。更有的,今天全单位崩溃。 ​ 提示许可15天内到期。之前大部分许可是到2021年1月1日的。 ​ 后续的版本许可都是永久的…