滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜。

一、调色滤镜

  调色滤镜可控制元素的模糊、颜色、亮度等变化,并且多个滤镜可组合在一起使用。这些滤镜大部分既能接收百分数,也能接收数值。当传入的值大于上限值时,会以上限值来处理。

1)模糊

  blur()滤镜会对元素进行高斯模糊的处理,它能接收一个模糊半径的长度值。注意,不能向其传递负数。在下图中,右侧是调用了blur()滤镜后的效果。

div {
filter: blur(5px);
}

2)透明

  opacity()滤镜可控制元素的透明度,其默认值为1或100%(表示不透明),最小值为0。opacity()滤镜与opacity属性类似,但两者不是互斥关系,可同时应用于同一个元素,不过opacity属性会在执行完所有的滤镜后再起作用。在下图中,右侧是调用了opacity()滤镜后的效果。

div {
filter: opacity(.5);
}

3)阴影

  drop-shadow()滤镜可为元素的透明部分提供阴影,其取值与text-shadow属性类似,也是X轴与Y轴的偏移、模糊半径以及颜色。下图使用了一张透明的五角星图,右侧调用了drop-shadow()滤镜,阴影会沿着透明轮廓渲染。

div {
filter: drop-shadow(5px 5px 5px #F60);
}

4)灰度

  grayscale()滤镜能转换元素的灰度,当值为1或100%时,元素会转换成完全的灰度。在下图中,右侧是调用了grayscale()滤镜后的效果。

div {
filter: grayscale(100%);
}

5)褐色

  sepia()滤镜能指定元素褐色的比例,即用褐色为元素上色。当值为1或100%时,元素会转换成完全的深褐色。在下图中,右侧是调用了sepia()滤镜后的效果。

div {
filter: sepia(100%);
}

6)反转

  invert()滤镜能将元素的颜色反转处理,即用255或100%减去颜色的R、G和B通道的值。在下图中,右侧是调用了invert()滤镜后的效果。

div {
filter: invert(100%);
}

7)色相旋转

  hue-rotate()滤镜能接收一个角度值,参照标准色轮(如下图)旋转元素的整体色相。

  在下图中,右侧是调用了hue-rotate()滤镜旋转90°后的效果。

div {
filter: hue-rotate(90deg);
}

8)亮度

  brightness()滤镜能调整元素的明暗程度,值越小,元素越暗。在下图中,右侧是调用了brightness()滤镜后的效果。

div {
filter: brightness(50%);
}

9)对比度

  contrast()滤镜能调整元素颜色的对比度,对比度越低,颜色越接近。在下图中,右侧是调用了contrast()滤镜后的效果。

div {
filter: contrast(30%);
}

10)饱和度

  saturate()滤镜能调整元素颜色的饱和度,饱和度越低,颜色越暗。在下图中,右侧是调用了saturate()滤镜后的效果。

div {
filter: saturate(50%);
}

11)组合

  在声明filter属性时,可定义多个滤镜函数,用空格分隔,如下所示。在下图中,右侧是调用了多个滤镜后的效果。

div {
filter: drop-shadow(5px 5px 5px #F60) sepia(100%) saturate(50%);
}

二、SVG滤镜

  所有的CSS滤镜都能通过SVG滤镜实现。以blur(5px)为例,首先用一个名为filter.svg的文件描绘模糊的效果,其内容如下所示。

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="blur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</svg>

  然后通过url()函数引用SVG文件中的滤镜,注意,井号后面跟着的是filter元素的id属性值,效果如下图所示。

div {
filter: url(./filter.svg#blur);
}

  通过SVG文件的方式就能创造出各种功能的滤镜,以适应更多的复杂场景。

CSS躬行记(6)——滤镜的更多相关文章

  1. CSS躬行记(8)——裁剪和遮罩

    一. 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现.注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留.裁剪最早是 ...

  2. CSS躬行记(1)——CSS基础拾遗

    一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒 ...

  3. CSS躬行记(2)——伪类和伪元素

    一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...

  4. CSS躬行记(9)——网格布局

    网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语 下图展示了CS ...

  5. CSS躬行记(3)——CSS属性拾遗

    一.粘滞定位 粘滞定位(sticky)与相对定位类似,既不会脱离正常流,也不会改变元素盒类型,并且会保留原先所占的空间.它会相对于包含块偏移,它的包含块分为两种,第一种和绝对定位一样:第二种是最近的滚 ...

  6. CSS躬行记(4)——浮动形状

    CSS规范新增了一个模块:CSS Shapes,shape-outside属性属于该模块,它能影响浮动元素周边内容流的形状(即浮动形状),可接收三类值:形状盒子.函数和图像. 一.形状盒子 形状盒子( ...

  7. CSS躬行记(7)——合成

    在图形编辑软件中,可以按特定地方式处理不同图层的合成,最新的CSS规范也引入了该功能,并提供了mix-blend-mode和background-blend-mode两个属性.混合模式(blendin ...

  8. CSS躬行记(10)——CSS方法论

    方法论是一个哲学术语,会对一系列具体的方法进行分析研究.系统总结并最终提出较为一般性的原则.CSS方法论是一种面向CSS.由个人和组织设计.已被诸多项目检验且公认有效的最佳实践.这些方法论都会涉及结构 ...

  9. CSS躬行记(11)——管理后台响应式改造

    为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作. 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px ...

随机推荐

  1. Springboot使用Undertow

    Springboot使用Undertow Undertow 是红帽公司开发的一款基于 NIO 的高性能 Web 嵌入式服务器 Undertow的特点: 轻量级:它是一个 Web 服务器,但不像传统的 ...

  2. JSP(三)----EL表达式

    ##  EL表达式 1.概念:Expression  alnguage  表达式语言 2.作用:替换和简化JSP页面中java代码的编写 3.语法:${表达式} 4.注意: *  jsp默认支持EL表 ...

  3. 你真的理解 if __name__ == '__main__' 的作用么?

    https://blog.csdn.net/Amberdreams/article/details/88382993

  4. git 分支的创建与合并

    首先我们需要先创建一个新的dev分支,然后切换到dev分支: $ git checkout -b dev //命令语句 Switched to a new branch 'dev' //成功执行输出语 ...

  5. effective-java学习笔记---使用标记接口定义类型40

    标记接口(marker interface),不包含方法声明,只是指定(或“标记”)一个类实现了具有某些属性的接口. 例如,考虑 Serializable 接口.通过实现这个接口,一个类表明它的实例可 ...

  6. 编译原理:LL(1)文法的判断,递归下降分析程序

    1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...

  7. ArcGIS中影像图去黑边

    通常情况下有些影像图的背景会显示黑色,所以需要将影像图的格式转换一下,将黑色背景转换为透明色.具体去除河边的步骤如下: 1.在catalog中,选中要转换的影像图: 2.右键——导出——将栅格导出为不 ...

  8. 数据库(sqlserver 2005)优化排查之路

    查找问题过程是痛苦的,解决完问题是快乐! 兄弟帮助一个公司开发了一个旅游网站(asp.net+sqlsever2005),一直还算稳定,但是最近网站却慢的可以,让人头疼.登录服务器,进入任务管理器,发 ...

  9. flask操作数据库 以及 建表

    创建迁移仓库 首先,安装Flask-Migrate: pip install flask-migrate 将app项目注册,便于使用orm操作 from flask_sqlalchemy import ...

  10. C++ STL模板和标准模板库

    一.函数模板 #include<iostream> #include<string> using namespace std; template<class T> ...