如何使用CSS（和JavaScript？）创建模糊的“磨砂”背景？

Question

我正在尝试使用HTML5，CSS3和JavaScript创建可在Webkit浏览器上使用的iOS 7样式磨砂外观。从技术上讲，给出以下HTML：<style>  #partial-overlay {    width: 100%;    height: 20px;    background: rgba(255, 255, 255, .2); /* TODO frost */    position: fixed;    top: 0;    left: 0;  }</style><div id="main-view">  <div style="width: 50px; height: 50px; background: #f00"></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>我想-webkit-filter: blur(5px)对的第一个20px水平应用类似a 的内容#main-view。如果将CSS修改为，#partial-overlay { width: 20px; height: 100%; ...}则需要将其-webkit-filter: blur(5px)垂直应用于前20px。显而易见的解决方案是使用javascript来克隆#main-view，设置overflow: hidden，然后适当地更改宽度/高度，但是在我看来，很难将其推广到更复杂的页面/ CSS结构。有没有更好的方法来实现此目标，而又不会降低性能影响并最大程度地提高了通用性？

Answer 1

-webkit-和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, #partial-overlay, #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, #partial-overlay, #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, 255, 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>

我将其放在click函数中，因为我认为这将是最可能的用例。在准备好文档时，它将同样有效。

尽管画布表示不会是完美的像素，但我认为在大多数情况下它并不重要，因为其模糊了。

更新：根据要求，现在可以调整大小。我还将Cover div移到了JS中，并为Firefox添加了一个svg后备。调整大小要求在每次调整大小时都重新绘制画布，因此我将其设置为在调整大小时隐藏画布，覆盖图等，然后在调整大小停止时替换画布。