CSS3中强大的filter(滤镜)属性

在做video相机滤镜的时候，发现css3中很强大的滤镜属性，下面将贴代码展示：

效果图

代码展示：

<!DOCTYPE html> <html lang="zh-CN"><head> <title>滤镜页面</title></head>

<style>

img{width:33%;height:auto;float:left;}

.blur{-webkit-filter:blur(4px);filter:blur(4px);} /* 改变图片的清晰度默认值：0（值为length ）*/

.brightness{-webkit-filter:brightness(0.30);filter:brightness(0.30);}   /* 改变图片的亮度默认值：100％（值为0-1之间的小数）*/

.contrast{-webkit-filter:contrast(180%);filter:contrast(180%);}   /* 改变图片的对比度默认值：100％（值为num）*/

.grayscale{-webkit-filter:grayscale(100%);filter:grayscale(100%);} /* 把图片变成灰度默认值：100％，如果grayscale()中没有任何参数值，将会以“100%”渲染（值为0-1之间的小数）*/

.huerotate{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg);}   /* 改变图片的色相默认值：0deg（值为angle）*/

.invert{-webkit-filter:invert(100%);filter:invert(100%);}   /* 做出来的效果是我们照相机底面的效果一样默认值：100％（值为0-1之间的小数）*/

.opacity{-webkit-filter:opacity(50%);filter:opacity(50%);} /* 改变图片的透明度默认值：100％（值为0-1之间的小数）*/

.saturate{-webkit-filter:saturate(7);filter:saturate(7);} /* 改变图片的饱和度默认值：100％，将其值变大到300%：-webkit-filter:saturate(3); （值为num） */

.sepia{-webkit-filter:sepia(100%);filter:sepia(100%);}     /* 把图片变成褐色默认值：100％，如果sepia()中没有任参数值，将会以“100％”渲染（值为0-1之间的小数）*/

.shadow{-webkit-filter:drap-shadow(8px 8px 8px green);filter:drop-shadow(8px 8px 8px green);} /* 增加图片阴影 */

</style>

<body> <p><strong>注意：</strong>Internet Explorer 不支持 filter 属性。</p> 

<img src="1.png" width="300" height="300"> <img class="blur" src="1.png" width="300" height="300"> <img class="brightness" src="1.png" width="300" height="300"> <img class="contrast" src="1.png" width="300" height="300"> <img class="grayscale" src="1.png" width="300" height="300"> <img class="saturate" src="1.png" width="300" height="300"> <img class="grayscale" src="1.png" width="300" height="300"> <img class="huerotate" src="1.png" width="300" height="300"> <img class="invert" src="1.png" width="300" height="300"> <img class="opacity" src="1.png" width="300" height="300"> <img class="sepia" src="1.png" width="300" height="300"> <img class="shadow" src="1.png" width="300" height="300"> </body> </html>

最后编辑于：2019.10.22 22:40:09