css3 - 如何将网页CSS背景图高斯模糊且全屏显示

天蓬老师2017-04-17 11:01:30

高斯模糊是PS、FW图片处理工具搞的。

全屏显示的方法
1：使用CSS

.bg {
    background-image:url(scale.jpg);
    -moz-background-size: 100% 100%; /*  Firefox 3.6 */
    -o-background-size: 100% 100%;/* Opera 9.5 */
    -webkit-background-size: 100% 100%;/* Safari 3.0 */
    background-size: 100% 100%;/*  Firefox 4.0 and other CSS3-compliant browsers */
    -moz-border-image: url(scale.jpg) 0; /* Firefox 3.5 */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale');/* for < ie9 */
}

2：使用 IMG 标签

<img class="stock" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;" src="//m.sbmmt.com/m/wenda/default.jpg">

3：使用 CSS3 的背景 Cover

.bg {
    background: #000 url(scale.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

巴扎黑2017-04-17 11:01:30

如果不考虑兼容问题，可以参考css3的高斯滤镜。暂时只有webkit内核的浏览器支持，并且资源占用较大。如果要兼容，也只有把图片先高斯模糊了。

-webkit-filter: blur(10px)

大家讲道理2017-04-17 11:01:30

模糊可以使用 canvas 来实现.

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

代码未测试。思路大概是这样。