如何使用CSS(和JavaScript？)创建一个模糊,“磨砂”的背景？

新的和改进：-webkit- and Firefox Working Example，现在可调大小/流体。

JS

$(document).ready(function () {
    frost = function () {
        var w = $('#main-view').width();
        html2canvas(document.body,{
            onrendered: function (canvas) {
                document.body.appendChild(canvas);
                $('canvas').wrap('<div id="contain" />');
            },width: w,height: 30
        });
        $('canvas,#partial-overlay,#cover').hide();
        $('#cover').fadeIn('slow',function () {
            $('#partial-overlay').fadeIn('slow');
        });
    };

    $('body').append('<div id="cover"></div><svg id="svg-image-blur"><filter id="blur-effect-1"><feGaussianBlur stdDeviation="2"/></filter></svg>');

    $('#main-view').click(function () {
        frost();
        $('#partial-overlay').addClass('vis');
        $(window).resize(function () {
            $('canvas,#cover').hide();
        });

        function onResize() {
            if ($('#partial-overlay').hasClass('vis')) {
                frost();
            }
        }
        var timer;
        $(window).bind('resize',function () {
            timer && clearTimeout(timer);
            timer = setTimeout(onResize,50);
        });

    });

    $('#partial-overlay').click(function () {
        $('#partial-overlay').removeClass('vis');
        $('canvas,#cover').hide();
    });
});

CSS

#main-view {
    width:75%;
    height:50%;
    box-sizing: border-box;
    margin:8px;
}
#partial-overlay {
    display:none;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index:99;
    BACkground: rgba(255,0.2);
    cursor:pointer;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-filter:blur(5pX);
    filter: url(#blur-effect-1);
}
#cover {
    display:none;
    height:19px;
    width:100%;
    BACkground:#fff;
    top:0;
    left:0;
    position:absolute;
}
#contain {
    height:20px;
    width:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
svg {
    height:0;
    width:0;
}

HTML

<div id="main-view">
    <div style="width: 10%; height: 20%; BACkground: #f00; float: left"></div>To my left is a red box
    <br>Now there is just text
    <br>Text that goes on for a few pixels
    <br>or even more</div>
<div id="partial-overlay">Here is some content</div>

我把它放在一个点击功能，因为我认为这将是最可能的用例。它将在文档准备好工作。

虽然画布表示不会像素完美，我不认为它在大多数情况下真的很重要，因为它的模糊。

更新：根据要求现在可以调整大小。我也把cover div移动到JS中，并为Firefox添加了一个svg。调整大小需要在每次调整大小时重新绘制画布，因此在调整大小时将其设置为隐藏画布，叠加层等，然后在调整大小时将其替换。