上一篇我们介绍了CSS3滤镜效果的虚化效果、设置图片高度、调整图片对比度、为图片添加阴影等。这篇文章上接上一篇文章，我们重点介绍了CSS3滤镜效果的知识，将图像转换为灰度，对图像应用色调旋转，对图像应用不透明度。4.给图片添加阴影你可以使用drop-shadow()函数给图片添加阴影效果，比如Photoshop。此功能类似于box-shadow属性。示例：img{width:200px;height:100px;}img.shadow{-webkit-filter:drop-shadow(2px2px4pxorange);/*Chrome,Safari,Opera*/filter:drop-shadow(2px2px4pxorange);}img.shadow-large{-webkit-filter:drop-shadow(4px4px10pxorange);/*Chrome,Safari,Opera*/filter:drop-shadow(4px4px10pxorange);}/*一些CSS美化这个例子*/tabletd{padding:10px;text-align:center;}运行结果：注意：drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移，而第三个参数指定模糊半径，最后一个参数指定阴影颜色，就像box-shadow属性一样，但有一个例外，'inset'关键字是不允许的。5.将图像转换为灰度使用此grayscale()函数将图像转换为灰度。值为100%是完全灰度。值为0%时图像保持不变。0%到100%之间的值是有效的线性乘数。如果缺少数量参数，则使用值0。示例：img.complete-gray{-webkit-filter:grayscale(100%);/*Chrome,Safari,Opera*/filter:grayscale(100%);}img.partial-gray{-webkit-filter:grayscale(50%);/*Chrome,Safari,Opera*/filter:grayscale(50%);}运行效果：六、对图像进行色相旋转hue-rotate()函数对图像进行色相旋转。传递的参数定义图像样本将被调整的色环周围的程度。值0deg使图像保持不变。如果缺少角度“”参数，则使用0deg值。如果没有最大值，以上数值的效果会环绕360度。示例：img{width:200px;height:100px;}img.hue-normal{-webkit-filter:hue-rotate(150deg);/*Chrome,Safari,Opera*/filter:hue-rotate(150deg);}img.hue-wrap{-webkit-filter:hue-rotate(480deg);/*Chrome,Safari,Opera*/filter:hue-rotate(480deg);}/*一些CSS美化本例*/tabletd{padding:10px;text-align:center;}运行效果：7.对图像应用不透明度opacity()函数可以用来给图像增加透明度。值为0%表示完全透明，值为100%或1表示图像保持不变。0%到100%之间的值是有效的线性乘数。如果缺少“金额”参数，则使用值1。此功能类似于不透明度属性。例子：img{-webkit-filter:opacity(80%);/*Chrome,Safari,Opera*/filter:opacity(80%);}运行结果：8.总结本文基于CSS基础，通过案例，并详细说明如何使用CSS3滤镜的属性。如何设置图片的亮度和对比度，添加相应的阴影效果，改变图片的不透明度。这些方面通过运行后效果图的展示，让读者更加直观易懂。代码很简单，希望文章的内容能帮助大家更好的学习。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。
