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%)

   

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

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

相关文章

基于py32f030/qfn32开发的tft屏电子烟方案

一次性电子烟这些年在功能外观上不断迭代更新,在海外可以说是非常热门的电子烟产品。随着海外消费市场需求不断演变,用户开始追求更多可能比如:想知道设备还剩多少电池和烟油,想避免干烧的吸入口感和低电量的意外,想让…

实战案例:缓存不一致问题的解决(redis+本地缓存caffine)

一.问题引入 目前在写项目的时候,在B端查看文章,A端修改文章。为了增加效率,以及防止堆内存溢出,在B端选择本地缓存文章的方案。但是目前出现了A端对文章修改之后,B端读的还是旧数据,出现了缓存不一致的问…

《数据结构、算法与应用C++语言描述》- 最小赢者树模板的C++实现

赢者树 完整可编译运行代码见:Github::Data-Structures-Algorithms-and-Applications/_30winnerTree 比赛规则 假定有 n 个选手参加一次网球比赛。比赛规则是“突然死亡法”(sudden-death mode):一名选手只要输掉一场球,就被淘汰。一对一对…

在mt4上怎么查看CHFJPY品种的合约细则?

在MetaTrader 4 (MT4) 上查看CHFJPY品种的合约细则的方法如下: FXCM福汇官方个人注册登录流程 1.打开MT4软件并登录到您的交易账户。 2.在MT4界面的"市场观察"窗格中,找到并右键单击"CHFJPY"货币对。如果您无法找到"市场观察…

贪吃蛇(三)绘制蛇身

绘制蛇身的逻辑不难,存储上面使用结构体。 第一行和第十九行绘制--其它行,绘制|,分别在头尾处。 (1) 扫描蛇身,如果扫描到则绘制[]。 (2) 扫描蛇身,如果扫描不到则绘制空白。 #include"curses.h"struct Sn…

鸿蒙ArkTS语言介绍与TS基础法

1、ArkTS介绍 ArkTS是HarmonyOS主力应用开发语言,它在TS基础上,匹配ArkUI框架,扩展了声明式UI、状态管理等响应的能力,让开发者以更简洁、更自然的方式开发跨端应用。 JS 是一种属于网络的高级脚本语言,已经被广泛用…

Pixel Nerf代码阅读

Input: 图像的 分辨率是 300*400; 每个场景里面有 49张 Training 的图像。 SB: scene batch 场景的个数; 4 NV: number input ,每个场景的视角,也就是图像的数量; 49 每条光线首先…

微电网优化(Matlab复现)— 微电网两阶段鲁棒优化经济调度方法_刘一欣

论文链接:微电网两阶段鲁棒优化经济调度方法 - 中国知网 代码链接:https://m.tb.cn/h.5Mg7fCo?tkhnpmWgZiv2R 复现效果: 运行环境:Matlab 2020bCplexyalmip 1 微电网结构 图 1 所示为典型的微电网结构,由可控分布式…

Python Opencv实践 - 手部跟踪

使用mediapipe库做手部的实时跟踪,关于mediapipe的介绍,请自行百度。 mediapipe做手部检测的资料,可以参考这里: MediaPipe Hands: On-device Real-time Hand Tracking 论文阅读笔记 - 知乎论文地址: https://arxiv.org/abs/2006…

Mysql之约束上篇

Mysql之约束上篇 约束的概述为什么需要约束什么是约束约束的分类 非空约束作用关键字特点添加非空约束删除非空约束 唯一性约束关键字特点添加唯一约束关于复合唯一约束删除唯一约束查看索引 主键约束(非空唯一性约束)作用关键字特点添加主键约束关于复合主键删除主键约束 约束…

排序算法——快排

快速排序算法最早是由图灵奖获得者Tony Hoare设计出来的,他在形式化方法理论以 及ALGOL.60编程语言的发明中都有卓越的贡献,是20世纪最伟大的计算机科学家之—。 而这快速排序算法只是他众多贡献中的—个小发明而已。 快速排序(Quick Sort)的基本算法思…

类和对象(中篇)

类的六个默认成员函数 如果一个类中什么成员都没有,简称为空类。 空类中真的什么都没有吗?并不是,任何类在什么都不写时,编译器会自动生成以下6个默认成员函数。 默认成员函数: 用户没有显式实现,编译器会…