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.mzph.cn/news/232950.shtml

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

相关文章

Verilog 字符串

文章目录 字符串简介字符串声明字符串操作输出字符画 字符串简介 一个字符串是由双引号"括起来并包含在一行中的字符序列。 在表达式和赋值语句中,用作操作数的字符串被视为由8bit ASCII码值表示的无符号整数常量。 字符串声明 字符串变量是wire/reg类型的变…

部署LVS的NAT模式

实验准备 #负载调度器# 192.168.116.40 #内网 12.0.0.100 #外网 先添加双网卡 #web服务器# 192.168.116.20 #web1 192.168.116.30 #web2 #nfs共享服务# 192.168.116.10 #nfs systemctl stop firewalld setenforce 0 1.nfs共享文件 1…

gitee(ssh)同步本地

一、什么是码云 gitee Git的”廉价平替” > 服务器在国内,运行不费劲 在国内也形成了一定的规模 git上的一些项目插件等在码云上也可以找得到 二、创建仓库 三、删除仓库 四、仓库与本地同步 > 建立公钥 五、把仓库同步到本地 六、在本地仓库中创建vue项目…

C++设计模式之——命令模式

命令模式 概念创建步骤示例示例一代码实现运行结果 示例二代码实现运行结果 示例三示例代码运行结果 示例四代码实现运行结果 应用场景 概念 命令模式是一种行为型设计模式,它允许将请求封装为一个对象,从而使得可以参数化客户端请求、将请求排队或者记…

libp2p 快速开始

文章目录 第一部分:libp2p 快速入门一、什么是libp2plibp2p 发展历程libp2p的特性p2p 网络和我们熟悉的 client/server 网络的区别: 二、Libp2p的实现目标三、Libp2p的用途四、运行 Libp2p 协议流程libp2p 分为三层libp2p 还有一个局域网节点发现协议 mD…

原生JS实现组件切换(不刷新页面)

这是通过原生Es6实现的组件切换,代码很简单,原理和各种框架原理大致相同。 创建文件 ├── component:存放组件 │ ├── home1.js:组件1 │ ├── home2.js:组件2 ├── index.html ├── index.js初始化ht…

LLaMA系列模型

1.LLama 1.1 简介 Open and Efficient Foundation Language Models (Open但没完全Open的LLaMA) 2023年2月,Meta(原Facebook)推出了LLaMA大模型,使用了1.4T token进行训练,虽然最大模型只有65B,但在相关评…

[23] GaussianAvatars: Photorealistic Head Avatars with Rigged 3D Gaussians

[paper | proj] 给定FLAME,基于每个三角面片中心初始化一个3D Gaussian(3DGS);当FLAME mesh被驱动时,3DGS根据它的父亲三角面片,做平移、旋转和缩放变化;3DGS可以视作mesh上的辐射场&#xff1…

「Vue3面试系列」Vue3.0的设计目标是什么?做了哪些优化?

文章目录 一、设计目标1.1 更小1.2 更快1.3更友好 二、优化方案2.1 源码2.11源码管理2.22 TypeScript 2.2 性能2.3 语法 API2.31逻辑组织2.32 逻辑复用 参考文献 一、设计目标 不以解决实际业务痛点的更新都是耍流氓,下面我们来列举一下Vue3之前我们或许会面临的问…

校园转转二手市场源码+Java二手交易市场整站源码

源码介绍 校园转转二手市场源码分享,Java写的应用,mybatis-plus 和 Hibernate随心用 后台地址:/home/index/index 账号密码:admin/123456 前台地址:/system/login

计算机网络2

OSI参考模型七层: 1.应用层 2.表示层 3.会话层 4.传输层 5.网络层 6.数据链路层 7.物理层 TCP/IP模型 5层参考模型

Apipost检测接口工具的基本使用方法

👀 今天言简意赅的介绍一款和postman一样好用的后端接口测试工具Apipost 专门用于测试后端接口的工具,可以生成接口使用文档官方下载网站:http://www.apipost.cn 傻瓜式安装—>register->项目->创建项目->APIs->新建目录&…

Linux Docker本地部署WBO在线协作白板结合内网穿透远程访问

文章目录 前言1. 部署WBO白板2. 本地访问WBO白板3. Linux 安装cpolar4. 配置WBO公网访问地址5. 公网远程访问WBO白板6. 固定WBO白板公网地址 前言 WBO在线协作白板是一个自由和开源的在线协作白板,允许多个用户同时在一个虚拟的大型白板上画图。该白板对所有线上用…

LeetCode刷题--- 全排列 II

个人主页:元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 http://t.csdnimg.cn/hKh2l 前言:这个专栏主要讲述递归递归、搜…

回归预测 | MATLAB实现GA-LSSVM基于遗传算法优化最小二乘向量机的多输入单输出数据回归预测模型 (多指标,多图)

回归预测 | MATLAB实现GA-LSSVM基于遗传算法优化最小二乘向量机的多输入单输出数据回归预测模型 (多指标,多图) 目录 回归预测 | MATLAB实现GA-LSSVM基于遗传算法优化最小二乘向量机的多输入单输出数据回归预测模型 (多指标&#…

ISCTF(b)

test_nc nc_shell ls cat flag 这两道题比较像 你说爱我?尊嘟假嘟 打开后重复出现 “ 你说爱我 ” “ 尊嘟 ” “ 假嘟 ” 。判断为 Ook 加密 , 将 “ 你说爱我 ” 替换为 “Ook.” ; “ 尊嘟 ” 替换为: “Ook!” ; “ 假嘟…

mysql函数(二)之常见字符串函数

MySQL中常见的字符串函数有以下几种: CONCAT():将两个或多个字符串连接在一起。 用法:CONCAT(string1, string2, ...) 效果图: LENGTH():返回字符串的长度。 用法:LENGTH(string) 效果图: U…

教你如何使用天眼销查企业客户

天眼销是一款能够帮助客户获取最新的企业联系方式、工商信息等关键数据的平台。 平台基于先进的技术和大数据解决方案,深入挖掘和分析企业信息,能够高效地收集、整理和存储各类企业数据,为用户提供360度视角和洞察;提供全面、准确…

【算法与数据结构】LeetCode55、45、跳跃游戏 I 、II

文章目录 一、跳跃游戏I二、跳跃游戏II三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、跳跃游戏I 思路分析:本题目标是根据跳跃数组的元素,判断最终能够到达数组末端。我们引入了一个跳跃范围…

跨境电商的未来工作方式:远程团队与全球协作

随着数字化时代的来临,跨境电商行业在不断演变,其未来工作方式也呈现出新的趋势。本文将探讨跨境电商未来的工作方式,聚焦于远程团队与全球协作的发展,以揭示这一变革如何重新定义企业的组织结构和工作模式。 远程团队的崛起 近年…