-webkit-filter
-webkit-filter有什么用
-webkit-filter:CSS的滤镜属性。可以在元素呈现之前,为元素渲染提供效果。常用于图像、背景、边框的渲染。
-webkit-filter的语法结构
-webkit-filter: none | blur(px) | brightness(%) | contrast(%) | grayscale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) | drop-shadow( radius ) | url() ;
-webkit-filter的可选属性
- none:默认值,无效果。
- blur(px):高斯模糊。
- brightness(%):亮度。
- contrast(%):对比度。
- grayscale(%):灰度。
- hue-rotate(deg):色相旋转。
- invert(%):反色。
- opacity(%):透明度。
- saturate(%):饱和度。
- sepia(%):褐色。
- drop-shadow(radius): 阴影。
- url():URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。
-webkit-filter效果及代码一览
- 原图片
代码:
.img{ -webkit-filter:none;}
- 图片模糊度5px
代码:
.img{ -webkit-filter: blur(5px);}
- 图片180%的亮度
代码:
.img{ -webkit-filter: brightness(180%);}
- 图片200%的对比度
代码:
.img{ -webkit-filter: contrast(200%);}
- 图片100%的图片灰度
代码:
.img{ -webkit-filter: grayscale(100%);}
- 图片色相旋转180度
代码:
.img{ -webkit-filter: hue-rotate(180deg);}
- 图片100%反色
代码:
.img{ -webkit-filter: invert(100%);}
- 图片50%透明度
代码:
.img{ -webkit-filter: opacity(50%);}
- 图片饱和度200%
代码:
.img{ -webkit-filter: saturate(200%);}
- 图片100%褐色
代码:
.img{ -webkit-filter: sepia(100%);}
- 图片阴影X偏移10px,y偏移10px,模糊为15px的蓝色阴影
代码:
.img{ -webkit-filter: drop-shadow(10px 10px 15px blue);}