css滤镜之下，不一样的精彩世界

滤镜之下，不一样的精彩世界"/>

css滤镜之下，不一样的精彩世界

原图：

grayscale滤镜（灰度滤镜）

彩色图片通过滤镜实现图片转变灰色

.sub02{width: 330px;float: right;background: grey;filter: grayscale(80%);-webkit-filter: grayscale(80%);-moz-filter:grayscale(80%);height: 200px;
}

如图：

sepia滤镜（棕褐色滤镜）

让图片呈现出老照片的效果

.sub02{width: 330px;float: right;background: grey;filter: sepia(80%);-webkit-filter: sepia(80%);-moz-filter:sepia(80%);height: 200px;
}

如图：

saturate滤镜（饱和度滤镜）

增强色彩图片的饱和度，让色彩更加鲜明，必须要使用大于100%，因为100%刚好是原色

.sub02{width: 330px;float: right;background: grey;filter: saturate(80%);-webkit-filter: saturate(80%);-moz-filter:saturate(80%);height: 200px;
}

如图：

hue-rotate滤镜

该滤镜将图片中所有颜色沿着颜色环旋转一个角度，产生特殊的视觉效果

.sub02{width: 330px;float: right;background: grey;filter: hue-rotate(90deg);-webkit-filter: hue-rotate(90deg);height: 200px;
}

如图：

invert滤镜（颜色翻转滤镜）

定义图片颜色的翻转程度

.sub02{width: 330px;float: right;background: grey;filter: invert(90%);-webkit-filter: invert(90%);height: 200px;
}

如图：

opacity滤镜（透明度滤镜）

当属性值为100%时，完全不透明。该滤镜的作用与opacity样式属性的作用相同。但是opacity属性不具有硬件加速特性，而在某些浏览器中当使用opacity滤镜时将利用硬件加速特性，因而拥有更高的页面性能。

.sub02{width: 330px;float: right;background: grey;filter: opacity(60%);-webkit-filter: opacity(60%);height: 200px;
}

如图：

contrast滤镜（对比度滤镜）

调试图片的亮度

.sub02{width: 330px;float: right;background: grey;filter: contrast(50%);-webkit-filter: contrast(50%);height: 200px;
}

如图：

blur滤镜（模糊滤镜）

.sub02{width: 330px;float: right;background: grey;filter: blur(5px);-webkit-filter: blur(5px);height: 200px;
}

如图：

drop-shadow滤镜（阴影滤镜）

.sub02{width: 330px;float: right;background: grey;filter: drop-shadow(4px -4px 7px  purple);-webkit-filter: drop-shadow(4px -4px 7px  purple);height: 200px;
}

如图：