css的filter全属性介绍

原图:

模糊(blur)

单位可为px或rem,值越大,越模糊

filter:blur(3px)
filter:blur(0.3rem)

亮度(brightness)

值可为数字或百分数,小于1时,亮度更暗;等于1时,无变化;大于1时,亮度更亮

filter:brightness(1.5)
filter:brightness(150%)

对比度(contrast

值可为数字或百分数,小于1时,对比度更低;等于1时,无变化;大于1时,对比度更高

filter:contrast(0.7)
filter:contrast(70%)

阴影(drop-shadow)

四个属性分别为:offset-x(阴影左右偏移的位置) offset-y(阴影上下偏移的位置) blur-radius(阴影模糊范围) color(阴影颜色)

filter:drop-shadow(-20px 10px 14px #c112d1)

 灰度 (grayscale)

值可为数字或百分数,等于0时,无变化;等于1时,为全灰;小于0大于1时,灰度为中间值

filter:grayscale(0.8)
filter:grayscale(80%)

   

 色调旋转(hue-rotate)

单位为deg,值为0deg时,无变化,90deg=0.25turn,-90deg=270deg

filter:hue-rotate(90deg)
filter:hue-rotate(0.25turn)

  

 反色(invert)

值可为数字或百分数,等于0时,无变化;等于1时,完全反色

filter:invert(0.6)
filter:invert(60%)

  

 透明度 (opacity)

值可为数字或百分数,等于0时,为透明;等于0.5时,半透明;等于1时,无变化。

filter:opacity(0.3)
filter:opacity(30%)

  

 饱和度(saturate)

值可为数字或百分数,等于0时,无饱和度;等于0.5时,半饱和度;等于1时,无变化;大于1时,为更大饱和度。

filter:saturate(3)
filter:saturate(300%)

  

 褐度(sepia)

值可为数字或百分数,等于0时,无变化;等于1时,为全褐;小于0大于1时,褐度为中间值

filter:sepia(0.65)
filter:sepia(65%)

   

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

非递归实现的快速排序

目录 序列文章 前言 学前补充 非递归快速排序 注意事项(重要) 实现步骤 代码实现 时空复杂度 快速排序的特性 栈的相关代码 序列文章 非递归实现的快速排序:http://t.csdnimg.cn/UEcL6 快速排序的挖坑法与双指针法:ht…

如何免费搭建私人电影网站(二)

前一篇的准备工作做好后就进行下面的具体操作 1、免费主机申请步骤 产品——立即开通 开通成功后会出现IP地址和网站地址如下图 点击进去管理 设置FTP密码和MYSQL数据库密码 设置好后,就可以通过FTP文件上传工具,将下载好的网站模版上传到空间了 FTP…

178. 第K短路(A*启发式算法)

178. 第K短路 - AcWing题库 给定一张 N 个点(编号 1,2…N),M 条边的有向图,求从起点 S 到终点 T 的第 K 短路的长度,路径允许重复经过点或边。 注意: 每条最短路中至少要包含一条边。 输入格式 第一行包…

python self用法详解

对于在类体中定义的实例方法,Python 会自动绑定方法的第一个参数(通常建议将该参数命名为 self),第一个参数总是指向调用该方法的对象。根据第一个参数出现位置的不同,第一个参数所绑定的对象略有区别: 在…

vue npm install 报错处理

一。Error: Cant find Python executable "python", you can set the PYTHON env variable 解决办法: 1、安装windows-build-tools npm install --global --production windows-build-tools2.安装node-gyp npm install --global node-gyp

云渲染农场如何付费使用?动画、效果图都一般怎么收费得?

许多刚入门计算机图形学的朋友可能会疑问,为何在渲染过程中需要借助云渲染服务,以及为何这些服务不是免费的。简单来讲,就是因为渲染工作量庞大,本机处理能力有限。设计和动画行业日渐将云渲染视为基本开支,这是因为数…

linux机器下/etc/hosts和/etc/resolv.conf文件解析

文章目录 1. /etc/resolv.conf1.1 概念1.2 配置1.3 用途 2. /etc/hosts2.1 概念2.2 配置2.3 两者优先级对比 1. /etc/resolv.conf 1.1 概念 DNS客户机的配置文件,用于设置DNS服务器的IP地址及DNS域名,还包含了主机的域名搜索顺序。该文件是由域名解析器…

5. Prism系列之区域管理器

Prism系列之区域管理器 文章目录 Prism系列之区域管理器一、区域管理器二、区域创建与视图的注入1. ViewDiscovery2. ViewInjection 三、激活与失效视图1. Activate和Deactivate2. 监控视图激活状态3. Add和Remove 四、自定义区域适配器1. 创建自定义适配器2. 注册映射3. 创建区…

【map】【单调栈 】LeetCode768: 最多能完成排序的块 II

作者推荐 【贪心算法】【中位贪心】.执行操作使频率分数最大 涉及知识点 单调栈 排序 map 区间合并 题目 给你一个整数数组 arr 。 将 arr 分割成若干 块 ,并将这些块分别进行排序。之后再连接起来,使得连接的结果和按升序排序后的原数组相同。 返回…

Java 实现汉字转拼音带音调

代码 import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat; import net.sourceforge.pinyin4j.format.HanyuPinyinToneType; import net.sourceforge.pinyin4j.format.HanyuPinyinVCharType; import net.sourcefo…

Linux学习笔记-Ubuntu下ssh服务器连接异常Connection reset

文章目录 一、问题问题现象1.1 连接重置无法访问的的问题1.2 查看服务器连接状态1.3 使用调试模式查看的信息 二、临时解决方法三、从根源解决问题3.1 问题分析3.2 服务器的ssh日志3.3 修改ssh配置禁止root登录3.4 配置允许所有ip访问3.5 修改认证方法3.6 再找原因 角色&#x…

Java生成带log的二维码

生成二维码案例 1.引入依赖 <!-- zxing生成二维码 --> <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.3.3</version> </dependency><dependency><groupId>co…

无锡市某厂区工人上岗未穿工作服,殒命车间 富维AI守护每位工友

2018年12月23日&#xff0c;凌晨6点半左右&#xff0c;江阴华士某铜业公司轧球车间内&#xff0c;独自上夜班的操作工朱某正在操作行车吊运一筐切好的铜粒&#xff0c;吊运完成后&#xff0c;他开始解除料筐上的吊具。就在这时&#xff0c;意外突然发生&#xff0c;他身上穿着的…

C++学习笔记(十六)

一、多态 1. 多态的基本概念 多态是C面向对象三大特性之一 多态分为两类 1. 静态多态&#xff1a;函数重载 和 运算符重载属于静态多态&#xff0c;复用函数名 2. 动态多态&#xff1a;派生类和虚函数实现运行时多态 静态多态和动态多态区别&#xff1a; 1. 静态多态的函…

STM32单片机项目实例:基于TouchGFX的智能手表设计(5)硬件驱动层程序设计

STM32单片机项目实例&#xff1a;基于TouchGFX的智能手表设计&#xff08;5&#xff09;硬件驱动层程序设计 目录 一、 概述 二、 新建工程与外设配置 三、 TouchGFX配置 四、 增加TouchGFX关键驱动 一、 概述 本文内容主要进行工程新建&#xff0c;硬件外设的配置以及添加…

用webstorm学习Vue的时候提示未解析的变量或类型怎么办?

用webstorm学习Vue的时候&#xff0c;很多同学是不是对以下这种提示看着不舒服 这种提示因为webstorm在解析代码进行提示的时候会把html文件中css选择器进行缓存&#xff0c;如果你在同一个文件夹下面写很多个html&#xff0c;并且多个html中都有同样的<div id"root&qu…

用23种设计模式打造一个cocos creator的游戏框架----(二十一)组合模式

1、模式标准 模式名称&#xff1a;组合模式 模式分类&#xff1a;结构型 模式意图&#xff1a;将对象组合成树型结构以表示“部分-整体”的层次结构。Composite 使得用户对单个对象和组合对象的使用具有一致性。 结构图&#xff1a; 适用于&#xff1a; 1、想表示对象的部分…

RK3399平台开发系列讲解(内核入门篇)网络协议的分层

🚀返回专栏总目录 文章目录 一、应用层二、传输层三、网络层四、数据链路层(Data Link Layer)五、物理层沉淀、分享、成长,让自己和他人都能有所收获!😄 📢对于多数的应用和用户而言,使用互联网的一个基本要求就是数据可以无损地到达。用户通过应用进行网络通信࿰

leetcode每日一题打卡

leetcode每日一题 746.使用最小花费爬楼梯162.寻找峰值1901.寻找峰值Ⅱ 从2023年12月17日开始打卡~持续更新 746.使用最小花费爬楼梯 2023/12/17 代码 解法一 class Solution {public int minCostClimbingStairs(int[] cost) {int n cost.length;int[] dp new int[n1];dp[…

《每天一分钟学习C语言·一》

1、转义字符&#xff1a;\n换行&#xff0c;\t前进一个tab键&#xff0c;\b退格键 2、八进制前面有0&#xff0c;%o或者%#o表示八进制&#xff0c;十六进制前有0X&#xff0c;%0x或者%#0x表示十六进制 3、%u打印无符号数&#xff0c;%g显示小数&#xff0c;类似于%f&#xff…