高级CSS filters

Winter（我） Is Coming…

在上一篇提到，filter有一个高斯模糊效果，类似于iPhone手机从下往上滑的那个功能的背景（我知道我没说明白，这次上图来解释，一看就了）

嗯就是图二介玩应的效果，图片转载…

这种效果早期的CSS是现实挺困难的，在早些年的时候，对filter规范就有支持，但是实在SVG标签上有这个属性，而且只支持Firefox浏览器，并且只能在运行在HTML。

首先能想到的是CSS的filter中的blur(),或者SVG中的filter，但这都不是新特性，什么新特性？

backdrop-filter

backdrop-filter出赖的效果和filter没有差别，但是有一个问题，在SVG上得到的filter效果，只能使用在SVG元素上；而filter使用在元素上，会直接影响其后代所有元素。

那么问题来了，如果只需要对元素的背景做filter效果，怎么破？这个时候就突显了backdrop-filter的重要性啦~

在写的过程中，顺便加了个点动画效果，有一段日子没接触animation了

div部分

<div id="elem"></div><p class="aligncenter"><img src="http://lorempixel.com/400/150/food/8" alt=""></p>

css

#elem {position: absolute;left: 0; right: 0; top: 50px;margin: auto;width: 200px;height: 200px;border-radius:46px;background: rgba(0,0,0,.2);animation: move 10s infinite linear;
}
@keyframes move {0% {transform: rotate(360deg);border-radius:0;}50%{transform: rotate(0deg);border-radius:46px;top：10px;}100%{transform: rotate(360deg);border-radius:0;}
}html {font: 1em sans-serif;
}
label {display: block;
}
.aligncenter {text-align: center;
}

每一个元素到达顶部header下面都会有一个blur(5px)的高斯模糊效果：

div

<h1>iOS blurred style with <code>backdrop-filter</code></h1><div class="Box"><p class="Box-header">Header bar</p><div class="Box-texts"><p class="Box-text">Who is that guy. It's already mutated into human form, shoot it. It's cold, damn cold. Ha, ha, ha, Einstein, you little devil. Einstein's clock is exactly one minute behind mine, it's still ticking. Hey, Doc, we better back up, we don't have enough roads to get up to 88. Yet.</p><p class="Box-text">What's going on? Where have you been all week? What? Uh Doc, uh no. No, don't be silly. Believe me, Marty, you're better off not having to worry about all the aggravation and headaches of playing at that dance. Oh, oh a rematch, why, were you cheating?</p><p class="Box-text">About 30 years, it's a nice round number. Now, now, Biff, now, I never noticed any blindspot before when I would drive it. Hi, son. C'mon, he's not that bad. At least he's letting you borrow the car tomorrow night. Hey Marty, I'm not your answering service, but you're outside pouting about the car, Jennifer Parker called you twice. Watch it, Goldie.</p></div></div><p>Works with Safari 9, iOS 9</p>

scss

html {font: 1em/1.4 sans-serif;text-align: center;
}
* {box-sizing: border-box;
}::-webkit-scrollbar {display: none;
}.Box {position: relative;width: 300px; height: 400px;overflow: hidden;margin: auto;background: url(https://unsplash.imgix.net/photo-1417962798089-0c93ceaed88a?fit=crop&fm=jpg&h=400&q=75&w=300);border: 1px solid #111;
}.Box-header {position: absolute;top: 0; left: 0; right: 0; z-index: 1;line-height: 60px;margin: 0;font-size: 1.4em;font-weight: bold;background: rgba(255,255,255,.95);
}/* effect: see through the header bar */
@supports (-webkit-backdrop-filter: none) {.Box-header {top: -5px; left: -5px; right: -5px;line-height: 65px;background: rgba(255,255,255,.6);-webkit-backdrop-filter: brightness(1.5) blur(4px);}
}.Box-texts {height: 400px;padding-top: 50px;overflow: auto;-webkit-overflow-scrolling: touch;
}.Box-text {text-align: left;padding: 1em;color: #fff;text-shadow: 0 1px 1px rgba(0,0,0,.8);
}

在上面的示例中，使用了@supports属性来做一个条件判断，当浏览器支持backdrop-filter属性，就有效果：

我的图：

因为到目前为止仅有Safari 9浏览器支持，如果您想在浏览器中看到相应的效果，可以下载Webkit Nightly浏览器。（如果你的电脑是windows 那就发布之后用苹果手机看吧）

在使用backdrop-filter时，有一些小细节需要注意：

1. 运用backdrop-filter元素的背景应该使用半透明，不然永远看不到效果
2. 当backdrop-filter属性和裁剪属性(如border-radius、mask、clip-path等)结全在一起使用时，会有Bug产生
3. backdrop-filter可以创建一个堆栈文本(Stacking Context)，类似于opacity属性一样
   可以配合动画属性animation一起使用
   4.到目前为止，仅有Safari浏览器支持，而且还需要添加前缀：-webkit-backdrop-filter,如果你使用autoprefixer这样的插件，无需考虑前缀相关事项

浏览器兼容性:
可以通过CanIUse查看各浏览器厂商对backdrop-filter的兼容：

filter()

如果你使用过这个属性制作一些效果，一定有发现过，他会直接影响其后代元素，有点类似于opacity(比如说你用opacity写背景半透明，这个背景盒子里又有文字，那么这个元素一定会影响子元素，就是说，你的文字，也会是半透明，要解决的话，只能再写一个备有背景颜色盒子，把文字写在这个盒子里，然后定位上去，是的就是这么麻烦)。
但很多时候，只是希望元素的背景做效果调整，又不希望他会影响其他元素。而且又没有backdrop-filter属性的情形之下，filter()就显得格外的重要。

在继续往下阅读之前，你要注意一点，filter()并不等于以前介绍过的filter属性。简单的理解，一个是函数，一个是属性。那么我们今天要说的是filter()函数。为了能更好的与filter属性区分，filter()函数接受两个参数：

filter(<url>, <filter-function-list>)

url 指的是一个图像
filter-function-list 是指过滤器
结合使用 就是会返回一个处理过的图像

.element { background: filter(url(zero/1.jpg), blur(5px)); 

注意事项:
1. 规范中定义的过滤函数
2. 和background-size属性一起使用会有Bug
3. 支持动画
3. 需要添加前缀：-webkit-filter()

总结，总之一句话，期待浏览器都支持吧，这样可以通过一行简单的CSS代码就能实现很多特殊（依赖于图片）效果。