图片的局部高斯模糊效果-CSS background-attachment:fixed实现实例页面

CSS代码：

.box { 
    width: 256px; height: 191px; 
    background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat fixed; 
    position: relative; 
    overflow: hidden;
}
.drag { 
    width: 100px; height: 100px;
    background: inherit; 
    -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); 
    cursor: -webkit-grab; cursor: -moz-grab; cursor: grab;
    position: absolute; 
    overflow: hidden;
}
.drag:active {
    cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing;
}
                

HTML代码：

<div class="box">
    <div id="drag" class="drag"></div>
</div>
                

JS代码：

var eleDrag = document.getElementById("drag");
if (eleDrag) {
    startDrag(eleDrag, eleDrag);
}