一、红包照片是啥？
出门右拐，这里不欢迎你！
整个世界都需要安静。。。
二、留下有惊喜
很开心你是留下的小伙伴！
这里给大家带来，使用css方式实现红包照片中模糊的效果。
blur_result.png
三、基本逻辑
1、底部一张处理过的模糊照片，完整显示。
2、上面是一张清晰照片，但是只显示一个圆形的部分。
要求两张照片的位置完全一致，这样看起来就会是上面的最终效果了。
//基本布局
<div class="img_container">
<img class="img_blur" style="position: absolute;" src="../images/dj_pic.jpg"/>
<img class="img_org" style="position: absolute;" src="../images/dj_pic.jpg"/>
</div>
四、模糊照片处理
首先必须了解一下filter属性。
1、css3属性filter属性值
grayscale灰度
sepia褐色
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
具体的效果参见：http://tkixp9.github.io/redbag/filter_value.html 。
2、css3属性filter的兼容性
由于是css3提供的新属性，所以并不是所有的浏览器都支持，不过目前比较高版本的浏览器都是支持的，但是使用时还是需要使用hack的写法：
img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter:grayscale(1);
-ms-filter: grayscale(1);
-o-filter: grayscale(1);
}
// 备注：ie不支持哦
3、模糊处理blur
// blur的参数是一个长度值，越大模糊效果越明显。
-webkit-filter: blur(10px);
五、偷窥镜处理
先来看看，如何显示图片的一部分。
1、clip属性
.img_org {
position: absolute;
clip: rect(100px,300px,200px,100px);
}
// top right bottom left
part_clip.png
然而可惜的是clip只能达到矩形的效果。（W3C的弃儿）
2、clip-path属性
clip-path的取值比较丰富，从理论上讲，只要是完整闭合的路径都是可以，大致可以分为三类：
1.基本形状：circle()/圆形、ellipse()/椭圆、inset()/矩形；
2.多边形：polygon()——事实上多边形也属于基本形状；
3.svg-clippath：通过url的方式引用svg中的clippath；这个我们以后单独介绍。
于是我们直接使用circle就可以得到最后的结果了。
.img_org {
position: absolute;
clip-path:circle(40px at 200px 200px);
-webkit-clip-path:circle(40px at 200px 220px);
}
备注：
1、可以使用svg－clippath真的很强大；
2、不过很可惜的是，目前只发现webkit的浏览器支持该属性。
3、完整结果
<div class="img_container">
<img class="img_blur" style="position: absolute;-webkit-filter: blur(10px);" src="../images/dj_pic.jpg"/>
<img class="img_org" style="position: absolute;-webkit-clip-path:circle(40px at 200px 220px);" src="../images/dj_pic.jpg"/>
</div>
blur_result.png
六、完善
我们也可以加一些互动的效果——增加一些按钮，控制偷窥镜的状态。
例如，
1、可以通过调整偷窥镜的圆心位置来查看图片不同位置的清晰效果；
2、也可以通过setInterval增加一个动画，不断增加偷窥镜的半径知道最终清晰区域完整显示图片。
这些都比较容易，大家可以自行完成。
七、家庭作业——view组合实现偷窥镜
由于clip-path的属性目前支持的还不是很广泛，我们也可以通过view的组合方式，利用border-radius和position来实现偷窥镜的效果，大家可以试一下。
完整demo：
http://tkixp9.github.io/redbag/demo_css.html 。
八、下集预告
canvas实现模糊照片和偷窥镜的效果。