zoukankan      html  css  js  c++  java
  • CSS3滤镜filter浅析

      在实现特定显示效果的页面中,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

      本文使用的图片如下:

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

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

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

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

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

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

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

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

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

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

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

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
  • 相关阅读:
    linux下Boost序列化问题解决
    树莓派搭建基于flask的web服务器-通过移动端控制LED
    unison+inotify
    员工为什么会离职 (转)
    编译安装 Centos 7 x64 + tengine.2.0.3 (实测+笔记)
    Cassandra 原理介绍
    使用Go语言编写区块链P2P网络(译)(转)
    缓存击穿举例
    Cassandra 原理介绍
    Go学习之路
  • 原文地址:https://www.cnblogs.com/monkeyleo/p/5545006.html
Copyright © 2011-2022 走看看