css滤镜属性,可以在元素呈现之前,为元素的渲染提供一些效果,如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。

语法:

webkit-filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | saturate() | sepia() | drop-shadow(radius) | url()

默认值:none

blur(<number>px) : 设置对象的模糊效果。(数值越大,对象越模糊)

brightness(<percentage>) : 设置对象的亮度。除百分比外,也可以用非负数表达。(百分数越大,对象越亮)

contrast(<percentage>) : 设置对象的对比度。除百分数外,也可以用0-1的数字表达。

grayscale(<percentage>) : 设置对象的灰度。除百分比外,也可以用0-1的数字表达。

hue-rotate(<percentage>deg) : 设置对象的色相旋转。用0-360数字表达。

invert(<percentage>) : 设置对象的反色。除了百分比外,也可以用0-1的数字表达。

opacity(<percentage>) : 设置对象的透明度。除了百分比外,也可以用0-1的数字表达。

saturate(<percentage>) : 设置对象的饱和度。除了百分比外,也可以用非负数表达。

sepia(<percentage>) : 设置对象的褐色程度。除了百分比外,也可以用0-1的数字表达。

drop-shadow(<length><length>radius<color>) : 设置对象的阴影。第一个长度是向右偏移距离,第二个长度是向下偏移距离,皆可为负值,皆为必传参数;第三个是阴影圆角,可选;第四个是阴影颜色,可选。

url(path.svg#a) : 设置对象滤镜效果。通过SVG可实现以上所有效果。SVG可写在页面里,也可外部引用。可增加锚节点。

CSS-滤镜 -webkit-filter的更多相关文章

  1. css滤镜模糊效果filter和backdrop-filter

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. WebRTC与CSS滤镜(CSS filter)

    我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜 先来看filter ...

  3. CSS 滤镜(IE浏览器专属其他浏览器不支持)

    Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...

  4. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  5. 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...

  6. 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的

    接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...

  7. CSS 滤镜技巧与细节

    本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...

  8. 哀悼疫情,全站灰色如何实现,CSS滤镜一行代码实现

    庚子清明,以国家之名哀悼,以国家之名哀悼在新冠肺炎疫情中牺牲的烈士和逝世的同胞! 向抗疫英雄致敬! 今日打开各样的app,各大电商,爱奇艺都是灰色的 这里我也一直很好奇该功能,前端如何实现,了解过后发 ...

  9. 让less编译通过css滤镜

    写IE6 hack的时候,发现在less中直接写css滤镜是会报错的,不能编译通过. 解决方法为:用~“”把相关的css代码包裹起来,例如: _top:~"expression(docume ...

  10. ffdshow 源代码分析 4: 位图覆盖滤镜(滤镜部分Filter)

    ===================================================== ffdshow源代码分析系列文章列表: ffdshow 源代码分析 1: 整体结构 ffds ...

随机推荐

  1. Docker 容器的网络连接 & 容器互联

    1. Docker 容器网络基础架构 Docker0 ifconfig查看到的 docker0 是linux的虚拟网桥(OSI数据链路层) docker0 地址划分: 172.17.42.1 255. ...

  2. mysql主主复制汇总整理

    mysql主主复制汇总整理 一.Mysql主主.主从复制主要思路: 1.mysql复制实质: 就是其他的MySQL数据库服务器将这个数据变更的二进制日志在本机上再执行一遍,因此非常重要的一点是mysq ...

  3. Thinkphp5 同时连接两个库

    新建api/user.php <?php /** * Created by PhpStorm. * User: Administrator * Date: 2018/8/25 * Time: 1 ...

  4. VS自学日记整理

    vs渣渣自学之旅 一.vs实用插件 二.制作简历之旅 1.一堆错误示范示范 2.标签的使用 3.文件的文本的样式的保存 二.美化博客园之旅 1.第一天 学python有点多这个慢慢消化

  5. opencv和numpy的安装

    近日,学姐让我们切割图片,查了一下资料,发现我需要安装opencv和numpy.但是在安装过程中却出现了很多小问题,我在此结合自和自己的安装经验和网上查找的资料,做一个笔记. 1.opencv的安装 ...

  6. 02 Django模型

    ORM 的作用 ORM 作用示意图 ORM 框架的功能 建立模型类和表之间的对应关系,允许通过面向对象的方式来操作数据库 根据设计的模型类生成数据库中的表格. 通过方便的配置就可以进行数据库的切换 数 ...

  7. 01 Django基础知识

    相关概念 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模块都有特定的功能 ...

  8. gcc——预处理(预编译),编译,汇编,链接

    一,预编译 操作步骤:gcc -E hello.c -o hello.i 主要作用: 处理关于 “#” 的指令 [1]删除#define,展开所有宏定义.例#define portnumber 333 ...

  9. poj 1995 快速幂

    题意:给出A1,…,AH,B1,…,BH以及M,求(A1^B1+A2^B2+ … +AH^BH)mod M. 思路:快速幂 实例 3^11  11=2^0+2^1+2^3    => 3^1*3 ...

  10. LA 7072 Signal Interference 计算几何 圆与多边形的交

    题意: 给出一个\(n\)个点的简单多边形,和两个点\(A, B\)还有一个常数\(k(0.2 \leq k < 0.8)\). 点\(P\)满足\(\left | PB \right | \l ...