CSS3 -webkit-filter 滤镜效果
2015-01-23 17:19
549 查看
-webkit-filter,其存在的作用通常是进行图片的处理
原图样式:
网页代码:
上面表示灰度100%效果图:
还可以添加的命令有:
原图样式:
网页代码:
<!doctype html> <html> <head> <meta charset='utf-8' /> <title>-webkit-filter</title> <style type="text/css"> img{-webkit-filter:grayscale(1);} </style> </head> <body> <img src="3.jpg" alt="" /> </body> </html>
上面表示灰度100%效果图:
还可以添加的命令有:
-webkit-filter:blur(5px); //模糊,此处为5像素-webkit-filter:sepia(0.5); //叠加褐色,取值范围0-1,此处表示50%的褐色-webkit-filter:brightness(0.5); //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无法看到图片)-webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红)此处为叠加黄色滤镜-webkit-filter:invert(1); //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色-webkit-filter:saturate(4); //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大-webkit-filter:contrast(2); //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大-webkit-filter:opacity(0.8); //透明度,取值范围0~1,0为全透明,1为原图-webkit-filter:drop-shadow(17px 17px 20px black); //阴影
相关文章推荐
- CSS3 -webkit-filter 滤镜效果
- CSS3 -webkit-filter 滤镜效果
- CSS3 -webkit-filter 滤镜效果
- CSS3的滤镜效果(-webkit-filter)
- CSS3 滤镜 webkit-filter详细介绍及使用方法
- CSS3 filter 实现滤镜效果
- as3使用滤镜实现高亮效果(GlowFilter)
- CSS3 filter(滤镜) 使用
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- CSS 滤镜 -webkit-filter 的介绍和使用
- css3属性 -webkit-filter
- Android setColorFilter 滤镜效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- [前端] css3滤镜效果
- 线性渐变-linear-gradient和滤镜opacity/filter的透明效果兼容性解决方案及其RGB/RGBA与16进制转换方法
- css3属性 -webkit-filter
- 模糊效果 使用filter滤镜
- [css filter]filter在界面实现滤镜效果
- css3高级滤镜-渐隐效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果