css filter滤镜的实例讲解_html/css_WEB-ITnose

由于 css3 的filter滤镜可以实现对对普通图像和SVG图像进行特效渲染,功能十分强大,所以今天特意把filter滤镜的用法进行大致的总结

语法:

element {        filter: none | <filter-function > [ <filter-function> ]*       }        <img  class="grayscale lazy"  src="/static/imghwm/default1.png"  data-src="image.jpg"     style="max-width:90%"  style="max-width:90%" alt="css filter滤镜的实例讲解_html/css_WEB-ITnose" >.grayscale {    filter: graycale(1);    //灰度属性    //可填写范围0~1,默认值为0,即灰度不改变}            

上面介绍了第一种滤镜: grayscale(灰度)

下面介绍接下来的九种滤镜

2.blur()高斯模糊

使用:该方法将周围像素点值求和取平均即为该点像素值参数:此属性接受参数接受长度值,默认值为0

.blur {    filter: blur(1px)} 

效果:

3.brightness()亮度

使用: 该方法调节图片的亮度参数: 默认值为1,但所填写值可以大于1,此时图像亮度会继续增强

.brightness {    filter: brightness(0.6)}

效果图:

4.contrast对比度

使用: 通过调节对比度使亮处更亮,暗处更暗参数: 默认值为1,最小值为0,无最大值

.contrast{    filter: contrast(150%)}

效果图:

5.drop-shadow设置阴影

使用: 使用效果与box-shadow类似,但浏览器可能会提供加速参数: 第一二个值是偏移量(允许负值) , 第三个参数表示模糊程度(不允许负值),第四个参数表示颜色

.drop-shadow{    filter: drop-shadow(20px, 20px, 10px, black)}

效果图:

6.hue-rotate色相

使用: 用于改变色相(即具体像素的数值)参数: 用角度表示,当数值为360deg时,图像不变

.hue-rotate{    filter: hue-rotate(90deg)}

效果图:

7.invert()图像反转

使用: 对图像进行颜色上的反转参数: 默认值是0,最大值是1

.invert{    filter: invert(100%)}

效果图:

8.opacity透明度

使用: 此样式类似于opacity属性参数: 0%~100%

.opacity {    filter: opacity(50%)    }

效果图:

9.saturate()饱和度

使用: 转换图像饱和度参数: 默认值是100%, 但超过100%的值是允许的

.saturate{    filter: saturate(200%)}

效果图:

![    图片描述][9]

10.sepia褐色加深(会产生一种老照片的感觉)

使用: 将图像转换为褐色参数: 默认值为0,范围是0~1

.sepia{    filter: sepia(100%)}

效果图

11.进行图像的复合处理,可以对图像进行任意的组合以获得想要的结果

.mixture{    filter:brightness(1.2) contrast(1.2)}

效果图:

通过filter属性你可以把你喜欢的图片非常容易地修改成易用的样式

......往往会把一件完整的东西化成无数的形象,就像凹凸镜一般,从正面望去,只见一片模糊.

                    --莎士比亚