前端页面制作中滤镜效果实现

 一、让浏览器页面呈现灰色

         具体方法:通过浏览器控制台打开"elements"--查询body,在右侧"styles"的element.style中设置filter:grayscale(1),页面效果即可马上呈现.

         filter是滤镜属性. 通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

 grayscale是控制灰度的一个属性,里面数字为1时(100%), 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度呈线性变化.

    效果如下:

 二、呈现页面模糊度

       具体方法:通过浏览器控制台打开"elements"--查询body标签,在右侧"styles"的element.style中设置filter:blur(10px)页面模糊效果即可马上呈现.

      如果blur没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

 三、页面呈现锐化效果

        此法还是以浏览器body为例. 在filter属性中设置constrast(1).调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

四、saturate

        saturate可转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是线性呈现效果。超过100%的值是允许的，则有更高的饱和度。 默认值是1。