css3滤镜总结

css3有一些滤镜挺有意思的,也很简单,遂学习一下,但一般会用得比较少,我们都直接切图了。 
这些滤镜主要都是都图片效果的处理,样式属性值中一般使用一个数值或数值百分比作为参数。我们用两张照片做对比看滤镜的效果。

1、grayscale(灰度滤镜)

彩色图像转为灰度图像

<img src="1.jpg">
<img src="1.jpg" class="grayscale">
.grayscale{
    filter:grayscale(100%);
    -webkit-filter: grayscale(100%);
}

1.png

2、sepia(老照片效果)

彩色图像添加一层褐色色调,呈现老照片效果

.sepia{
   filter:sepia(100%);
   -webkit-filter:sepia(100%);
}

2.png

3、saturate(饱和度滤镜)

让色彩更加鲜明

.saturate{
   filter:saturate(250%);
   -webkit-filter:saturate(250%);
}

3.png

4、hue-rotate 滤镜

这个滤镜比较特殊,将图像中所有颜色沿光环旋转一个角度。参数也是使用角度值。

.hue-rotate{
   filter:hue-rotate(90deg);
   -webkit-filter:hue-rotate(90deg);
}

4.png

5、invert (颜色翻转滤镜)

定义图像颜色的翻转程度,当参数100%时为反相效果

.invert{
   filter:invert(100%);
   -webkit-filter:invert(100%);
}

5.png

6、opacity (透明度滤镜)

透明度效果

.opacity{
   filter:opacity(50%);
   -webkit-filter:opacity(50%);
}

6.png

7、blur (模糊滤镜)

类似于在图像上加上一层玻璃遮罩,使图像具有一种烟雾效果

.blur{
   filter:blur(2px);
   -webkit-filter:blur(2px);
}

7.png

8、contrast (对比度滤镜)

提高图像亮度,可以在全黑与原图亮度之间调整图像的对比度

.contrast{
   filter:contrast(200%);
   -webkit-filter:contrast(200%);
}

8.png

9、drop-shadow (阴影滤镜)

给图像加上一层阴影效果

.drop-shadow{
   filter:drop-shadow(4px -4px 6px purple);
   -webkit-filter:drop-shadow(4px -4px 6px purple);
}

9.png

本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2016/500.html)

分享到:

关注w3cmark
微信公众号 w3cmark_com