css的filter全属性介绍

news2024/12/23 17:15:05

原图:

模糊(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%)

   

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

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

相关文章

微信支付怎么申请0.2费率

作为移动支付的主流方式,微信收款和支付宝为商家带来了便利的同时,每笔交易都要收取的0.6%收款手续费也成为商家的负担。现在使用现金支付的人少之又少,为了给顾客带来便捷的购物体验,所以即便是要付出手续费&#xff…

十四、YARN核心架构

1、目标 (1)掌握YARN的运行角色和角色之间的关系 (2)理解使用容器做资源分配和隔离 2、核心架构 (1)和HDFS架构的对比 HDFS架构: YARN架构:(主从模式) &…

visual stdio code运行vue3

npm init vuelatest 该命令初始化vue项目 使用visual stdio code创建vue项目 ,这边是vue-project文件夹 vs code打开项目 vscode操作vue项目 vscode操作vue项目

【Leetcode】旋转矩阵

题目链接:https://leetcode.cn/problems/rotate-matrix-lcci/description/ 题目描述 给你一幅由 N N 矩阵表示的图像,其中每个像素的大小为 4 字节。请你设计一种算法,将图像旋转 90 度。 不占用额外内存空间能否做到? 示例 …

找出一个二维数组中的鞍点

找出一个二维数组中的鞍点&#xff0c;即该位置上的元素在该行上的最大、在该列上最小。也有可能没有鞍点。 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> int main() {int a[10][10] { 0 };int n 0, m 0;int i 0, j 0;printf("请输入这个数组有n行m列…

算法学习——栈与队列

栈与队列 栈与队列理论基础用栈实现队列思路代码 用队列实现栈思路代码 删除字符串中的所有相邻重复项思路代码 有效的括号思路代码 逆波兰表达式求值思路代码 滑动窗口最大值思路代码未完待续 前 K 个高频元素思路代码拓展 总结栈在系统中的应用括号匹配问题字符串去重问题逆波…

FPGA时序分析与时序约束(二)——时钟约束

目录 一、时序约束的步骤 二、时序网表和路径 2.1 时序网表 2.2 时序路径 三、时序约束的方式 三、时钟约束 3.1 主时钟约束 3.2 虚拟时钟约束 3.3 衍生时钟约束 3.4 时钟组约束 3.5 时钟特性约束 3.6 时钟延时约束 一、时序约束的步骤 上一章了解了时序分析和约束…

LinuxCNC的使用

先进行程序设置 点击“开始”,选择“创建新的配置” 设置好机床名称和单位 关键是需要设置并口地址 查看并口使用命令:lscpi -v 将使用的并口填入: 这里是设置页面

Vue 自定义搜索输入框SearchInput

效果如下&#xff1a; 组件代码 <template><div class"search-input flex flex-space-between flex-center-cz"><input type"text" v-model"value" :ref"inpuName" :placeholder"placeholder" keyup.enter&…

6.s081操作系统Lab4: trap

文章目录 chapter 4概览4.1 CPU trap流程使用寄存器如果cpu想处理1个trap 4.2 用户态引发的trap4.2.1 uservec4.2.2 usertrap4.2.3 usertrapret和userretusertrapretuserret Lab4Backtrace (moderate)Alarm (hard) chapter 4 概览 trap的场景&#xff1a;系统调用&#xff0c…

Unity3D拆分模型动画展示

系列文章目录 Unity工具 文章目录 系列文章目录前言一、模型拆分功能1-1、首先先搭建一个简单的场景1-2、导入DoTween插件1-3、代码实现1-4、效果展示&#xff08;一个一个拆分的&#xff09; 二、对称模型拆分2-1、规则的&#xff0c;镜像的&#xff0c;对称的都可以使用2-2、…

gitee提交代码步骤介绍(含git环境搭建)

1、gitee官网地址 https://gitee.com; 2、Windows中安装git环境 参考博客&#xff1a;《Windows中安装Git软件和TortoiseGit软件》&#xff1b; 3、设置用户名和密码 这里的用户名和密码就是登录gitee网站的用户名和密码如果设置错误&#xff0c;可以在Windows系统的“凭据管理…

八股文打卡day3——计算机网络(3)

面试题&#xff1a;请讲一下四次挥手的过程&#xff1f; 1.客户端发送FIN数据包给服务器&#xff0c;表示客户端不再发送数据给服务器&#xff0c;想要断开这个方向的连接。 2.服务器收到客户端的FIN包之后&#xff0c;发送ACK包给客户端&#xff0c;对收到的FIN包进行收到确认…

你也是爬虫高手?毫秒级抢票,光速入监狱

文章目录 前言案情介绍法院观点判决情况判决文书案例分析 关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python兼职渠道 前言 …

C++ 开发中为什么要使用继承

为何继承 实验介绍 继承是 C++ 中的特性之一,使用继承能够有效减轻工作量,使得开发更加高效。 知识点 什么是继承为何继承继承的内容权限关键字什么是继承 生活中继承是指孩子继承父亲的财产等。C++ 使用了这一思想,却又与生活中的继承不一样。 在使用继承时,派生类是…

cesium学习笔记(问题记录)——(三)

一、根据点跟角度计算另一点坐标&#xff08;三维球体&#xff09; export const getAnotherPoint (lon: number, lat: number, angle: number, distance: number) > {// WGS84坐标系var a 6378137; // 赤道半径var b 6356752.3142; // 短半径var f 1 / 298.257223563;…

valgrind定位C++线程/内存等错误

Valgrind 是一套 Linux 下&#xff0c;开放源代码&#xff08;GPL V2&#xff09;的仿真调试工具的集合。 Valgrind 由内核&#xff08;core&#xff09;以及基于内核的其他调试工具组成。内核类似于一个框架&#xff08;framework&#xff09;&#xff0c;它模拟了一个 CPU 环…

【漏洞复现】CVE-2023-47261 Dokmee ECM信息泄露致远程命令执行

漏洞描述 Dokmee ECM是一款国外企业内容管理 (ECM) 软件。每个公司的办公室每个角落都存放着文档、记录和档案。Dokmee 一系列解决方案可以帮助您高效地组织、保护和管理这些文件。支持的文件:PDF、TIFF、Word、Excel、Auto-CAD 绘图、电子邮件等。Dokmee 可以帮助您立即实现…

模型部署之模型转换

一、模型转换的意义 模型部署是为了模型能在不同框架间流转。 在实际应用时&#xff0c;模型转换几户都用于工业部署&#xff0c;负责模型从训练框架到部署侧推理框架的连接&#xff0c;这是因为随着深度学习随着深度学习应用和技术的演进&#xff0c;训练框架和推理框架的职…

在linux上基于shell自动部署Java项目

一&#xff0c;安装git yum list git 列出git安装包 yum install git 在线安装git 使用 git -varsion 查看是否安装成功 安装成功 二&#xff0c; Git克隆代码 git clone 远程仓库地址 三&#xff0c;创建shell脚本 touch shell.sh shell脚本 #!/bin/sh echo echo 自动…