CSS3 Filter

摘要：遇到两次 filter，第一次遇见只知道它能够使图片模糊。最近再次遇到才决定看看，原来它这么厉害，原谅我的无知…

filter属性

blur(px)模糊
grayscale(%)灰度
sepia(%)转褐色
saturate(%)饱和度
hue-rotate(deg)色相旋转
invert(%)反色
opacity(%)透明度
brightness(%)亮度
contrast(%)对比度
drop-shadow()阴影
url()SVG滤镜
遇到两次都是使用的blur(px)方法，用来给图像设置高斯模糊。它的参数是设定高斯函数的标准差，就是屏幕上以多少像素融在一起， 因此值越大越模糊

1
2
3
4
image {
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}

CSS3 filter(滤镜) 属性
W3CPLUS:CSS3 Filter的十种特效

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

持续学习