毛玻璃背景

Posted 2020-08-22 涵枫筱怡

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;
}