登录

做有态度的前端团队

网易FEG前端团队

css3滤镜总结

Eason 作者: 日期: 2016-08-31
138185

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

手机阅读请扫描下方二维码：

none
上一篇：一个简单的卡片效果   下一篇：最快的Web开发IDE——HBuilder

© 2024 FEG-做最好的前端_网易游戏网站服务部前端团队_有态度的互联网前端团队. 由 NetEase 倾情推出.