web-dev-qa-db-fra.com

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

J'essaie de brouiller le contenu derrière un en-tête à position fixe afin que le contenu derrière lui fasse défiler l'utilisateur soit flou derrière ce div.

J'avais l'habitude d'y parvenir avec une simple opacité en CSS mais cela ne bloque pas le contenu derrière le DIV, impose simplement un panneau translucide devant lui.

Y a-t-il un moyen simple, même si c'est une triche de réaliser ce que je recherche. Que ce soit en utilisant une image de fond PNG ou en CSS.

Jetez un œil à la façon dont iOS7 fait cela http://www.Apple.com/ios/ios7/features/ .

csshtmlpngblur
14
RIK

Nous sommes en 2015 maintenant, et Apple a annoncé Safari 9, qui prend en charge une nouvelle fonctionnalité CSS, le backdrop-filter. L'utilisation de cette règle CSS sur votre div applique des filtres uniquement aux éléments situés derrière:

#myDiv {
    backdrop-filter: blur(10px);
}

example

Cette fonctionnalité n'est actuellement disponible que dans Safari de toute façon (et le -webkit est nécessaire pour que cela fonctionne), je ne recommande donc pas de l'utiliser pour le moment. Si vous le faites, veillez à utiliser @supports ou/et JS pour implémenter une solution de secours pour les navigateurs qui ne le prennent pas encore en charge:

@supports (backdrop-filter: blur(10px)) {
    #myDiv { background: #181818; }
}

Voici le tableau de compatibilité sur caniuse.com , ainsi que les demandes de fonctionnalités Chromium et Firefox .

En savoir plus sur nouveautés de Safari .

9
Tiago Marinho

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

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

Homme de paille:

<body>
    <section>
        <article>
            <header></header>
            <div class="blurheader"></div>

            <!-- content-->

        </article>
    </section>
</body>

Vous aurez besoin de jQuery , Stackblur et html2canvas .

  1. Dupliquez la zone de contenu et convertissez-la en canevas.
  2. Déplacez le canevas vers l'en-tête.

  3. Synchronisez le défilement du contenu avec le canevas dans l'en-tête.

    html2canvas crée le canevas, Stackblur crée un flou gaussien sur le canevas et l'élément d'en-tête est superposé au .blurheader div pour simuler la translucidité.

Si vous êtes à l'aise avec JavaScript, cela vaut peut-être la peine d'être approfondi. Il prend en charge les dernières versions d'IE, Chrome, Safari et Firefox et permet des options de secours gracieuses pour les navigateurs hérités.

À votre santé.

26
nallenscott

C'est vraiment difficile. Pour le moment, vous ne pouvez pas le faire comme le fait iOS, car vous pouvez soit flouter soit ne pas brouiller un élément. Vous ne pouvez pas en brouiller une partie.

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

Une bonne façon d'utiliser cela est:

*:not(.unblurred) {
 -webkit-filter: blur(1px);
}

Mais ce n'est pas vraiment idéal dans presque tous les cas.

Les CSS Custom Shaders sont probablement prometteurs, tout comme peut-être l'utilisation de -moz-element comme arrière-plan, mais pour le moment, la réponse est essentiellement "pas de chance".

Essayez http://iamvdo.me/conf/2012/kiwiparty/#/ dans Firefox (cliquez n'importe où) pour voir l'effet -moz-element. Ce n'est pas mal, mais le support est limité et très lent.

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

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

2
Rich Bradshaw

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

La réponse que vous cherchez est dans cette question Blur Img's & Div's en HTML en utilisant CSS

1
skmasq

Une façon de le faire sans <canvas> est:

  1. Créez un clone profond du sous-arbre contenant des éléments partiellement bloqués.
  2. Floutez le clone et positionnez-le de manière à ce qu'il se superpose au sous-arbre d'origine.
  3. Attachez le clone à l'élément de blocage.
  4. Découpez le sous-arbre d'origine dans des zones situées à l'extérieur de l'élément de blocage (à l'aide de clip-path).

J'expérimente cette méthode ici . Le code qui le fait est principalement ici .

Certains des inconvénients sont:

  1. Si vous changez la visibilité des éléments ou modifiez le DOM, vous devez mettre à jour les clones.
  2. Cela peut rendre le défilement un peu lent.
  3. Les clones d'éléments partiellement bloqués doivent avoir un style identique pour que cela fonctionne.
0
hagabaka