css3滤镜总结
css3有一些滤镜挺有意思的，也很简单，遂学习一下，但一般会用得比较少，我们都直接切图了。
这些滤镜主要都是都图片效果的处理，样式属性值中一般使用一个数值或数值百分比作为参数。我们用两张照片做对比看滤镜的效果。
1、grayscale(灰度滤镜)
彩色图像转为灰度图像
1 2 | <img src="1.jpg"><img src="1.jpg" class="grayscale"> |
1 2 3 4 | .grayscale{ filter:grayscale(100%); -webkit-filter: grayscale(100%);} |
2、sepia(老照片效果)
彩色图像添加一层褐色色调，呈现老照片效果
1 2 3 4 | .sepia{ filter:sepia(100%); -webkit-filter:sepia(100%);} |
3、saturate(饱和度滤镜)
让色彩更加鲜明
1 2 3 4 | .saturate{ filter:saturate(250%); -webkit-filter:saturate(250%);} |
4、hue-rotate 滤镜
这个滤镜比较特殊，将图像中所有颜色沿光环旋转一个角度。参数也是使用角度值。
1 2 3 4 | .hue-rotate{ filter:hue-rotate(90deg); -webkit-filter:hue-rotate(90deg);} |
5、invert (颜色翻转滤镜)
定义图像颜色的翻转程度，当参数100%时为反相效果
1 2 3 4 | .invert{ filter:invert(100%); -webkit-filter:invert(100%);} |
6、opacity (透明度滤镜)
透明度效果
1 2 3 4 | .opacity{ filter:opacity(50%); -webkit-filter:opacity(50%);} |
7、blur (模糊滤镜)
类似于在图像上加上一层玻璃遮罩，使图像具有一种烟雾效果
1 2 3 4 | .blur{ filter:blur(2px); -webkit-filter:blur(2px);} |
8、contrast (对比度滤镜)
提高图像亮度，可以在全黑与原图亮度之间调整图像的对比度
1 2 3 4 | .contrast{ filter:contrast(200%); -webkit-filter:contrast(200%);} |
9、drop-shadow (阴影滤镜)
给图像加上一层阴影效果
1 2 3 4 | .drop-shadow{ filter:drop-shadow(4px -4px 6px purple); -webkit-filter:drop-shadow(4px -4px 6px purple);} |
手机阅读请扫描下方二维码：
上一篇：一个简单的卡片效果
下一篇：最快的Web开发IDE——HBuilder
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1