图片的局部高斯模糊效果-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);
}
                

效果: