一、什么是filter
CSS滤镜属性,可以在元素呈现之前,为元素的渲染提供一些效果,如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。目前Filter Effects Module
还只是W3C的一个草案,浏览器还不完全支持,在使用时需要加浏览器前缀。
二、filter语法
/* 设置滤镜函数(可多个,空格分开) */ filter: <filter-function> [<filter-function>]* | none /* 引入定义了filter效果的svg资源,且可设置特定id的效果 */ filter: url(svg-url#element-id)
filter标准定义了一些已实现预设效果的函数(如grayscale
、blur
等);你也可以将设置了SVG滤镜的xml文件,用URL引入,且可以包含一个锚点来指定一个具体的滤镜效果。filter属性默认值为none,可应用于图像和容器元素,没有继承性。
预置的滤镜函数(filter-function)有:
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()>
| <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>
filter属性可接受多个滤镜函数,展示多个滤镜叠加后的效果。
URL函数引入svg滤镜
SVG滤镜资源(SVG Filter Sources)是指以xml文件格式定义的svg滤镜效果集,可以通过URL引入并且通过锚点(#element-id)指定具体的一个滤镜元素。如:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full"> <defs> <!-- 此处定义滤镜 --> <filter id="blur"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> </filter> </defs> </svg>
想要应用此svg文件中定义的滤镜效果,只需url引入该文件(可设#blur锚点)作为filter属性的值就可以了。其中feGaussianBlur
、feOffset
称之为filter primitive。
三、效果举例
给图像设置高斯模糊。参数值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
filter: blur(5px); <!-- 对应的filter primitive --> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>