css3 filter属性(神奇的滤镜)

[zgw010]

filter

CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。
CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。

1. 语法

/* 通过url设置filter */
filter: url("filters.svg#filter-id");

/* 直接设置filter */
filter: blur(5px);                                               //高斯模糊 2333
filter: brightness(0.4);                                      //调节亮度
filter: contrast(200%);                                     //调整对比度
filter: drop-shadow(16px 16px 20px blue);    //设置阴影效果
filter: grayscale(50%);                                     //将图像转换为灰度图像
filter: hue-rotate(90deg);                               //给图像应用色相旋转
filter: invert(75%);                                          //反转输入图像
filter: opacity(25%);                                       //设置透明度
filter: saturate(30%);                                      //设置图像饱和度
filter: sepia(60%);                                           //将图像转换为深褐色

/* 组合设置filter */
filter: contrast(175%) brightness(3%);

/* filter全局属性 */
filter: inherit;
filter: initial;
filter: unset;

更详细的语法在MDN

简单例子

<style>
        .img2 {
            /*灰度100%*/
            -webkit-filter: grayscale(100%);
        }
    </style>
    <p>原图</p><img class='img1' src="a.jpeg" />
    <p>经过滤镜转化后的图</p><img class='img2' src="a.jpeg" />

效果

这里似乎侵犯了tj大神的肖像权,简单使用就是这样,这个属性真的是很炫酷的一个属性.