Comment appliquer un filtre CSS à une image d'arrière-plan ?

Question

Comment appliquer un filtre CSS à une image d'arrière-plan ?

Demandé el 18 de Novembre, 2013: Quand la question a-t-elle été
145884 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un fichier JPEG que j'utilise comme image d'arrière-plan pour une page de recherche, et j'utilise une feuille de style en cascade pour le définir, car je travaille dans le cadre d'un système de gestion des ressources humaines. Backbone.js contextes :

background-image: url("whatever.jpg");

Je veux appliquer un filtre flou CSS 3. uniquement à l'arrière-plan, mais je ne sais pas comment donner un style à ce seul élément. Si j'essaie :

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

juste en dessous background-image dans mon CSS, cela donne un style à toute la page, et pas seulement à l'arrière-plan. Existe-t-il un moyen de sélectionner uniquement l'image et d'y appliquer le filtre ? Ou bien, existe-t-il un moyen de désactiver le flou pour tous les autres éléments de la page ?

Demandé el 18 de Novembre, 2013 par fox

4 votes

Ne flouter qu'une partie d'une image : codepen.io/vsync/pen/gjMEWm

Commenté el 18 de Juillet, 2018 par vsync

Answer 1

5 Réponses

Answer 2

9voto

Sumitava Das Points 91

Veuillez vérifier le code ci-dessous :-

.backgroundImageCVR{
    position:relative;
    padding:15px;
}
.background-image{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
    background-size:cover;
    z-index:1;
    -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);   
}
.content{
    position:relative;
    z-index:2;
    color:#fff;
}

<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>

Répondu el 20 de Janvier, 2016 par Sumitava Das (91 Points )

Answer 3

3voto

saikat Points 67

Dans le .content dans le CSS, changez-le en position:absolute . Sinon, la page rendue ne sera pas déroulable.

Répondu el 6 de Février, 2015 par saikat (67 Points )

Answer 4

1voto

SharpC Points 488

Bien que toutes les solutions mentionnées soient très astucieuses, elles semblaient toutes présenter des problèmes mineurs ou des effets d'entraînement potentiels avec d'autres éléments de la page lorsque je les ai essayées.

Finalement, pour gagner du temps, je suis simplement revenu à mon ancienne solution : J'ai utilisé Paint.NET et je suis allé dans Effets, Flou gaussien avec un rayon de 5 à 10 pixels et j'ai enregistré cela comme image de page :-)

HTML :

<body class="mainbody">
</body

CSS :

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

EDIT :

J'ai finalement réussi à le faire fonctionner, mais la solution est loin d'être simple ! Voir ici :

filter : blur(1px) ; ne fonctionne pas dans firefox, IE, et opera

Répondu el 2 de Novembre, 2016 par SharpC (488 Points )

Answer 5

1voto

Max Tusken Points 11

Bien sûr, ce n'est pas une solution CSS, mais vous pouvez utiliser le CDN Proton avec filter :

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

Il s'agit de https://developer.wordpress.com/docs/photon/api/#filter

Répondu el 20 de Mars, 2018 par Max Tusken (11 Points )

Answer 6

1voto

codeWithMe Points 49

Tout ce dont vous avez besoin, c'est d'un "filtre" :

blur(«WhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

Répondu el 15 de Septembre, 2018 par codeWithMe (49 Points )

Comment appliquer un filtre CSS à une image d'arrière-plan ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment appliquer un filtre CSS à une image d'arrière-plan ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: