css3滤镜filter 特效

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

模糊 blur(5px)

值越大越模糊,默认是0,就是不模糊;;

CSS3 filter过滤 模糊 blur(5px)

灰度 grayscale(%)

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。若未设置,值默认是0。也可以写0-1之间的小数。 filter:grayscale(100%);

CSS3 filter过滤 灰度 grayscale(%)

褐色 sepia(%)

sepia褐色:使用这种效果,你的图片好像很古老的一样 filter:sepia(100%); //默认值:100%,如果sepia()中没有任参数值,将会以“100%”渲染(值为0-1之间的小数)

CSS3 filter过滤 褐色 sepia(%)

饱和度 saturate(%)

值为0%则是完全不饱和,值为100%则图像无变化。大于100%,则饱和度增高,色彩就会变重。 filter:saturate(200%);

CSS3 filter过滤 饱和度 saturate(%)

色相旋转 hue-rotate(90deg)

用来改变图片的色相,给图像应用色相旋转。让图像中的颜色,在色相环中做对应的旋转。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。 hue-rotate(90deg)

CSS3 filter过滤 色相旋转 hue-rotate(%)

反色 invert

做出来的效果就像是我们照相机底面的效果一样,invert(100%); //默认值:100% (值为0-1之间的小数)

透明度 opacity(%)

图像的透明程度。值为0%则是完全透明,值为100%则图像无变化。0-100%之间则是部分透明。也可以用0-1之间的小数替代%。 与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

亮度 brightness(%)

使图片更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。值超过100%,图像会比原来更亮。如果没有设定值,默认是1。可以使用百分比也可以使用小数表示。

对比度 contrast(%)

调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值超过100%,意味着会运用更低的对比。若没有设置值,默认是1。可以使用百分比也可以使用小数表示。

阴影drop-shadow(x偏移 y偏移 模糊范围 颜色)

与 box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。 filter:drop-shadow(2px 10px 0 rgba(255,0,0,0.5));