欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3滤镜filter浅析

程序员文章站 2022-03-28 09:49:33
...
  在实现特定显示效果的页面中,css的filter属性是一种强大的工具。它能让我们的页面更加地个性化并减少PS方面的工作。filter的属性值主要有以下十种:
    1. blur
    2. grayscale
    3. sepia
    4. saturate
    5. hue-rotate
    6. invert
    7. brightness
    8. contrast
    9. opacity
    10. drop-shadow

  本文使用的图片如下:

CSS3滤镜filter浅析

  一、blur属性。blur的使用格式一般为 filter: blur(1px); -webkit-filter: blur(1px); 该属性用来为元素增加模糊效果,显示效果如下:

CSS3滤镜filter浅析

  二、grayscale属性。grayscale的使用格式一般为 filter: grayscale(0.6); -webkit-filter: grayscale(0.6); 该属性用来设置元素的灰度,可以使彩色图片变为黑白,显示效果如下:

CSS3滤镜filter浅析

  三、sepia属性。sepia的使用格式一般为 filter: sepia(0.6); -webkit-filter: sepia(0.6); 该属性用来设置元素的褐色,显示效果如下:

CSS3滤镜filter浅析

  四、saturate属性。saturate的使用格式一般为: filter: saturate(0.15); -webkit-filter: saturate(0.15); 该属性常用来改变图片的饱和度,显示效果如下:

CSS3滤镜filter浅析

  五、hue-rotate属性。hue-rotate的使用格式一般为: filter: hue-rotate(189deg); -webkit-filter: hue-rotate(189deg); 该属性常用来改变图片的色相,显示效果如下:

CSS3滤镜filter浅析

  六、invert属性。invert的使用格式一般为: filter: invert(56%); -webkit-filter: invert(56%); 该属性用来实现反色,invert做出来的效果就像是我们照相机底面的效果一样,显示效果如下:

CSS3滤镜filter浅析

  七、brightness属性。brightness的使用格式一般为: filter: brightness(300%); -webkit-filter: brightness(300%); 该属性用来设置图片的亮度,显示效果如下:

CSS3滤镜filter浅析

  八、contrast属性。contrast的使用格式一般为: filter: contrast(56%); -webkit-filter: contrast(56%); 该属性用来改变图片的对比度,显示效果如下:

CSS3滤镜filter浅析

  九、opacity属性。opacity的使用格式一般为: filter: opacity(56%); -webkit-filter: opacity(56%); 该属性用来设置图片的透明度,显示效果如下:

CSS3滤镜filter浅析

  十、drop-shadow属性。drop-shadow的使用格式一般为: filter: drop-shadow(10px 10px 10px yellow); -webkit-filter: drop-shadow(10px 10px 10px yellow); 用来给图片增加阴影效果,与box-shadow类似,显示效果如下:

CSS3滤镜filter浅析

  ps:opacity在IE下的显示方法:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

相关标签: CSS3滤镜filter浅析