div {
       -moz-filter: blur(5px);    -webkit-filter: blur(5px);    -o-filter: blur(5px);    -ms-filter: blur(5px);    filter: blur(5px);}

 

上面是css方式,以下是html5方式:

blur(document.getElementById('logo'),'http://s.segmentfault.com/img/logo.png',2);function blur(element, src, strength){      var image = new Image();    image.onload = function(e){        var canvas = document.createElement('canvas');        var context = canvas.getContext('2d');        canvas.width = this.width;        canvas.height = this.height;                context.drawImage(this, 0, 0);                context.globalAlpha = 0.5; // Higher alpha made it more smooth        // Add blur layers by strength to x and y        // 2 made it a bit faster without noticeable quality loss        for (var y = -strength; y <= strength; y += 2) {            for (var x = -strength; x <= strength; x += 2) {                context.drawImage(canvas, x, y);            }        }        context.globalAlpha = 1;           element.style.backgroundImage = 'url('+canvas.toDataURL()+')';    }    image.src = src;}