CSS3 / HTML 5 / PNG brouiller le contenu derrière l'élément

Je suis en train de flou sur le contenu derrière une position fixe de l'en-tête de sorte que le contenu derrière c'est a l'utilisateur fait défiler est floue quand derrière cette div.

J'ai utilisé pour réaliser cette simple opacité dans le CSS mais ce n'est pas bleu le contenu derrière le DIV, simplement impose un panneau translucide en face d'elle.

Est-il un moyen simple même si c'est un cheat de réaliser ce que je suis après. Que ce soit par l'aide d'un PNG image d'arrière-plan ou en CSS.

Jetez un oeil à la façon iOS7 cette http://www.apple.com/ios/ios7/features/.

source d'informationauteur Robin Knight

9

C'est 2015 maintenant, et Apple a annoncé Safari 9, qui prend en charge une nouvelle fonctionnalité CSS, le backdrop-filter. À l'aide de cette règle CSS sur votre div applique des filtres à éléments seulement:
```
#myDiv {
    backdrop-filter: blur(10px);
}
```
Cette fonctionnalité est actuellement disponible uniquement en Safari de toute façon (et la -webkit préfixe est nécessaire pour qu'il fonctionne), de sorte que je ne recommande pas de l'utiliser pour l'instant. Si vous le faites, assurez-vous de faire usage de @supports ou/et JS pour mettre en œuvre de repli pour les navigateurs qui ne supportent pas encore:
```
@supports (backdrop-filter: blur(10px)) {
    #myDiv { background: #181818; }
}
```
Voici la tableau de compatibilité à caniuse.comainsi que la Chrome et Firefox demandes de fonctionnalités.

En savoir plus sur ce qui est nouveau dans Safari.
26

Avec un peu de HTML5 et JavaScript magie, la réponse est oui:

http://jsfiddle.net/nallenscott/WtQjY/41/

Homme de paille:
```
<body>
    <section>
        <article>
            <header></header>
            <div class="blurheader"></div>

            

        </article>
    </section>
</body>
```
Vous aurez besoin jQuery Stackbluret html2canvas.
1. De dupliquer le contenu de la zone et de le convertir à la toile.
2. Déplacer la toile à l'en-tête.
3. Synchroniser le défilement du contenu de la toile dans l'en-tête.
  
  html2canvas crée la toile, Stackblur crée un flou gaussien sur la toile, et l'élément d'en-tête est posé au-dessus de la .blurheader div pour simuler la translucidité.
Si vous êtes à l'aise avec JavaScript, alors ce pourrait être intéressant d'étudier plus plus loin. Il prend en charge les dernières versions de IE, Chrome, Safari et Firefox et permet gracieux de secours options pour les anciens navigateurs.

Acclamations.
2

C'est vraiment dur. Droite maintenant, vous ne pouvez pas le faire de la manière iOS, vous pouvez soit flou ou pas de flou de l'élément. Vous ne pouvez pas simplement le flou de la partie.

Vous pouvez utiliser Webkit du filtre de flou sur les autres éléments, mais ce n'est pas tout à fait assez bon.

Plutôt une bonne façon de l'utiliser est la suivante:
```
*:not(.unblurred) {
 -webkit-filter: blur(1px);
}
```
Mais ce n'est pas vraiment idéale dans presque tous les cas.

CSS Personnalisé Shaders sont susceptibles prometteurs, comme c'est peut-être l'aide d'-moz-l'élément de fond, mais pour l'instant, la réponse est en gros durs de la chance'.

Essayer http://iamvdo.me/conf/2012/kiwiparty/#/33 dans Firefox (cliquez n'importe où) pour voir le-moz-effet de l'élément. Il n'est pas mauvais, mais le soutien est limité, et il est très lent.

http://codepen.io/simurai/pen/dFzxL montre une démo qui n'est pas mauvais, mais s'appuie sur une image de fond qui est connu à l'avance.

http://webdirections.org/demos/translucency/index.html est une autre démo, qui n'est pas mal du tout. Tutoriel est http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/
1

Non, vous ne pouvez toujours pas flou du contenu sous quelque chose, vous devez flou de l'élément lui-même.

La réponse que vous cherchez est dans cette question Flou Img & Div en HTML à l'aide de CSS
0

Un moyen de le faire sans <canvas> est:
1. Créer une profonde clone de la sous-arborescence qui contient partiellement les éléments bloqués.
2. Flou le clone et le positionner de sorte qu'il empile sur le dessus de l'origine de la sous-arborescence.
3. Clip le clone de l'élément de blocage.
4. Le Clip original de la sous-arborescence des régions à l'extérieur de l'élément de blocage (à l'aide de clip-path).
Je suis en train d'expérimenter cette méthode ici. Le code qui le fait, c'est surtout ici.

Certains des inconvénients sont:
1. Si vous modifiez la visibilité des éléments ou modifier le DOM, vous devez mettre à jour les clones.
2. Il peut faire de défilement un peu lent.
3. Les clones de partiellement bloqué éléments doivent être de style à l'identique pour que cela fonctionne.

Vous devez vous connecter pour publier un commentaire.