一、红包照片是啥？

出门右拐，这里不欢迎你！
整个世界都需要安静。。。

二、留下有惊喜

很开心你是留下的小伙伴！
这里给大家带来，使用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实现模糊照片和偷窥镜的效果。

红包照片四不像（一）