Tout en créant mon nouveau site Web, j'ai trébuché sur ce numéro:
Je veux que tout ce qui soit derrière la barre Naville de mon site Web soit floue. Cela doit être dynamique, ce qui signifie que si l'utilisateur fait défiler le contenu qui se déroule sous la barre Naville est floue. Vous pouvez afficher l'effet sur La page d'accueil Apple , avec leur barre NAV.
Voici quoi J'ai essayé jusqu'à présent: Cependant, cela a entraîné une brouille de la barre NAV, pas ce qui est sous la barre NAV. est-ce encore possible avec pure CSS?
3 Réponses :
Oui. Utilisez la propriété filtrante. Le support du navigateur est toujours un peu pointillé.
update strong>: @valentinwalter Vous devez utiliser un autre élément pour contenir l'image et flou. Les filtres fonctionnent sur les éléments DOM, donc si vous l'appliquez sur la barre NAV, toute la barre NAV sera floue. En outre, rappelez-vous que BLUR a un coût associé - plus vous enlevez l'image, plus le traitement des ordinateurs sera taxé. P> qui étant dit, voici un petit exemple de ce que vous devriez faire:
https://codesandbox.io/s/8LMW5J2QQ8 P> Essentiellement, appliquez le flou à un élément absolument positionné à l'intérieur de la barre NAV. P> .navbar {
position: relative;
overflow: hidden;
}
.blur {
filter: blur(10px);
position: absolute;
top: 0;
left: 0;
}
<div class="navbar">
<div class="blur"></div>
...
</div>
Merci d'avoir pris le temps de répondre. On dirait que cela résoudra mon problème. J'ai une question cependant: peut-il être dynamique, de sorte que lors du défilement des choses qui se déroulent sous la barre NAVBAR?
Haha, je savais que c'est ce que tu voulais vraiment. Malheureusement non. Il n'y a pas de moyen simple de faire cela dans html / js sauf si vous rendant votre application totale à l'intérieur d'une toile JavaScript - mais vous rencontrerez ensuite des problèmes encore pires tels que la gestion de la mise en page. , etc.
Essayez
p>
<div class="mydiv"> xyz </div>
Utilisez ceci pour faire de l'arrière-plan BLUR: -
<style>
.mydiv {
//Set Blur value
filter: blur(2px);
}
</style>
<body>
<!--Path of Image and its width and height-->
<div style="background-image:url('ascii.png');width:1440px;height:900px;" class="mydiv">
</div>
</body>
On s'attend à ce que vous essayez au moins de tenter de coder cela par vous-même. Je vous suggère de faire des Recherche complémentaire , via Google ou en la recherche afin de tenter de tenter et. Si vous avez toujours des problèmes, revenez avec votre code et expliquez ce que vous avez essayé.
Voir la chose, c'est que vous besoin pour montrer vos efforts. Un exemple de reproductible minimal est souvent le meilleur moyen de savoir ce que vous travaillez, ce que vous avez essayé et où vous êtes coincé. Ce que vous avez maintenant est trop large et ambigu.
@Valentinwalter Voir ma réponse mise à jour. Aussi, soyez conscient que toutes les réponses ici étaient correctes, mais elles ne peuvent pas écrire le code pour vous. Vous devez faire un peu plus de recherches avant de poser la question. J'espère que cela vous aide à poser de meilleures questions la prochaine fois. Jusque-là, amusez-vous à explorer des filtres CSS!