Comment utiliser le CSS et le JavaScript?) pour créer un flou, “givré” de fond?

Merci pour l'inspiration... Il m'a conduit à cette toile plugin qui fait le tour

Nouveaux et Améliorés: -webkit - et Firefox de Travail Exemple, maintenant re-extensible/liquide.

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>

Je l'ai mis dans une fonction de clic, parce que j'ai pensé qu'il serait le plus susceptible de cas d'utilisation. Il fonctionnera tout aussi bien sur le document de prêt.

Bien que la toile de la représentation ne sera pas de pixel parfait, je ne le pense pas vraiment d'importance dans la plupart des cas en raison de son flou.

Mise à jour: Comme l'a demandé c'est maintenant re-extensible. J'ai aussi déplacé le couvercle div dans le JS et a ajouté une svg tomber en arrière pour Firefox. Le redimensionnement exige de la toile afin d'être redessiné à chaque re-taille, alors je l'ai mis en place pour masquer la toile, de superposition, etc alors que vous êtes de redimensionnement et de le remplacer lors de la re-taille s'arrête.

Est-il une meilleure façon d'atteindre cet objectif avec un minimum de performances et
maximale de la généralisabilité?

La réponse à cette question est pas.

La raison en est que, pour faire ce que vous voulez, vous auriez besoin d'un accès direct à l'image utilisé pour la fenêtre du navigateur pour extraire ou de manipuler les pixels dans la zone que vous souhaitez flou (je le souhaite, "aero" dans un navigateur pourrait look très soigné..) ou un filtre qui fonctionne sur les éléments derrière celui de l'appliquer à un (ou peut avoir une limitation de la région définie à elle).

Comme il n'y a pas de support natif pour ce faire (en plus de la toile et l'extension de l'API, ou une bibliothèque qui génèrent des canevas de l'image de l'html -> relativement lent), cela devra être fait avec la ruse (images, de la scission de la vrd, etc.) dans les deux cas.

Si vous avez fait tout en votre page sur une toile, vous pourriez faire beaucoup de choses intéressantes, mais vous aussi, vous avez besoin pour effectuer la mise en page, mise à jour, filtrage, etc. vous-mêmes et à cet effet, vous seriez de retour pas non optimisé que le Javascript est plus lent que le natif (pour ne pas mentionner qu'il serait susceptible d'erreurs).

Jusqu'à ce que des navigateurs vous permettent de saisir une partie de la fenêtre comme une toile (jamais? en tant que nécessiterait tout sur la page pour en être de même origine ou ont contenu spéciaux accepter les en-têtes set) il n'y a pas moyen de contourner, mais pour faire des tours.

Mise à jour

Comme une démonstration que vous pouvez le faire en utilisant html2canvas etc, mais d'avoir à utiliser des compromis (-> ralentissement des performances) - la démo est rude, expérimentaux et les besoins des réglages fonctionne bien, mais pour des raisons de démonstration seulement:

http://jsfiddle.net/AbdiasSoftware/RCaLR/

Résultat:

Fonction généralisée à saisir une partie de l'arrière-plan:

getBlurredBG(x, y, width, height, id);

Obtenir une partie de la fenêtre à l'aide de html2canvas:

function getBlurredBG(x, y, w, h, id) {

    html2canvas(document.body, {
        onrendered: function (canvas) {
            process(canvas, x, y, w, h, id);
        },
        width: (x + w),
        height: (y + h)
    });
}

Le contenu:

function process(canvas, x, y, w, h, id) {

    //create new canvas to enable clipping
    //As html2canvas returns a canvas from 0,0 to width and height
    //we need to clip it.
    var ocanvas = document.createElement('canvas');
    ocanvas.width = w;
    ocanvas.height = h;
    ocanvas.style.left = x + 'px';
    ocanvas.style.top = y + 'px';
    ocanvas.style.position = 'absolute';
    ocanvas.id = id;

    var ctx = ocanvas.getContext('2d');
    ctx.drawImage(canvas, x, y, w, h,
                          0, 0, w, h);

    stackBlurCanvasRGB(ocanvas, x, y, w, h, 28)
    lighten(ocanvas);

    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.fillRect(x, y, w, h);

    ctx.fillStyle = '#999';
    ctx.font = '32px arial';
    ctx.fillText("Partial overlay content", 10, 60);

    document.body.appendChild(ocanvas);
}

http://thiv.net/frost

De l'échantillon vivent de ce que j'ai fait ( et mis à jour pour ressembler à l'image ci-dessus )

Code:

<style>
  #partial-overlay {
    width: 100%;
    height: 45px;
    background: #ffffff; /* TODO frost */
    -webkit-opacity:0.70;
    -webkit-filter: blur(5px);
    position: absolute;
    top: 20px;
    left: 0px;
    z-index:5;
  }
  #main-view
  {
   position: fixed;
   top: 20px;
   left: 80px;
   z-index:-1;
  }
</style>
<div id="main-view">
  <div style="width: 50px; height: 50px; background: #f00; position:fixed; left:10px; top: 40px; -webkit-filter: blur(2px); "></div>
    <div style="width: 80px; height: 60px; background: #fff; position:fixed; left:0px; top: 66px; -webkit-filter: blur(5px);"></div>
    <div style="width: 50px; height: 30px; background: #f00; position:fixed; left:10px; top: 60px;"></div>
  <p style="font-family:Sans, Arial, Verdana;">
  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
  </p>
</div>
<div id="partial-overlay">

</div>

Je l'ai fait regarder d'un peu plus jolie qu'elle ne doit l'être, mais Ça marche!!!

Malheureusement, il n'ya pas de bonne façon de le faire, comme vous l'avez compris, vous aurez besoin d'une copie de la div principale:

<div class="wrapper">
<div class="overlay"></div>
<div id="main-copy"></div>
</div>

Superposition de pousser l'enveloppe de largeur tout autour, principal-copie sera avec en arrière plan flou. Il n'y aura évidemment des problèmes de performance si le contenu en main-copie est complexe.