Comment appliquer des filtres CSS aux images d'arrière-plan
P粉675258598
2023-08-23 14:06:46
<p>J'ai un fichier JPEG que j'utilise comme image d'arrière-plan pour ma page de recherche et j'utilise CSS pour le définir 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<em>appliquer un filtre de flou CSS 3 uniquement</em>à 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>Juste en dessous de <code>background-image</code> dans mon CSS, il stylise la page entière, pas seulement l'arrière-plan. Existe-t-il un moyen de simplement sélectionner l'image et de lui appliquer un filtre ? Alternativement, existe-t-il un moyen de désactiver le flou pour tous les autres éléments de la page ? </p>
Stylo
Élimine le besoin d'éléments supplémentaires tout en intégrant le contenu dans le flux du document plutôt que d'être fixe/absolu comme d'autres solutions.
Utiliser la mise en œuvre
Modifier Si vous souhaitez supprimer la bordure blanche sur les bords, utilisez
110%
pour la largeur et la hauteur et-5 pour le %代码> gauche et supérieur. Cela agrandira légèrement votre arrière-plan, mais il ne devrait pas y avoir de couleur unie qui dépasse sur les bords. Merci à Chad Fawcett pour la suggestion.
Regardez ce stylo.
Vous devez utiliser deux conteneurs différents, un pour l'image d'arrière-plan et un autre pour votre contenu.
Dans l'exemple, j'ai créé deux conteneurs :
.background-image
和.content
.Les deux sont placés avec des valeurs
position:fixed
和left:0;右:0;
。显示它们的差异来自于为元素设置不同的z-index
.