Comment utiliser les effets de filtre CSS sur les images d'arrière-plan
P粉022285768
2023-08-20 13:28:36
<p>J'ai un fichier JPEG que j'utilise comme image d'arrière-plan pour ma page de recherche et je le configure en utilisant CSS car je travaille dans un contexte Backbone.js : </p>
<pre class="brush:php;toolbar:false;">image d'arrière-plan : url("whatever.jpg");</pre>
<p>Je souhaite appliquer un filtre de flou CSS 3 uniquement à l'arrière-plan, mais je ne sais pas comment styliser uniquement cet élément. Si j'essaye : </p>
<pre class="brush:php;toolbar:false;">-webkit-filter: flou(5px);
-moz-filter : flou (5px);
-o-filtre : flou (5px);
-ms-filter : flou (5px);
filtre : flou (5px);</pre>
<p>Placez le code ci-dessus dans mon CSS sous <code>background-image</code> et il stylisera la page entière, pas seulement l'arrière-plan. Existe-t-il un moyen de sélectionner uniquement une image et d'appliquer un filtre à cette image ? Alternativement, existe-t-il un moyen de simplement désactiver l'effet de flou pour les autres éléments de la page ? </p>
stylo
Suppression du besoin d'éléments supplémentaires, permettant au contenu de s'intégrer dans le flux documentaire sans être fixe/absolu comme d'autres solutions.
Utilisez les méthodes suivantes pour réaliser
Modifier Si vous souhaitez supprimer la bordure blanche sur le bord, utilisez la gauche et le haut de
110%
的宽度和高度以及-5%
. Cela agrandira légèrement votre image d’arrière-plan, mais il n’y aura pas de couleur unie qui saigne sur les bords. Merci à Chad Fawcett pour la suggestion.Découvrez ce Cahier.
Vous devrez utiliser deux conteneurs différents, un pour l'image d'arrière-plan et un autre pour le contenu.
Dans l'exemple, j'ai créé deux conteneurs,
.background-image
和.content
.Ils utilisent tous la valeur
position: fixed
和left: 0; right: 0;
进行定位。它们显示的差异来自于为元素设置的不同z-index
.