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é
145886 affichage: Nombre de visites la question a
4 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

4 Réponses

Answer 2

-1voto

code builders Points 141

Sans utiliser la pseudo-classe de

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

Répondu el 29 de Mai, 2020 par code builders (141 Points )

Answer 3

-1voto

pat Points 72

Vous pouvez créer une division au-dessus de l'image à laquelle vous voulez appliquer le filtre et utiliser la fonction backdrop-filter à sa classe CSS. Consultez ce lien

Répondu el 10 de Septembre, 2020 par pat (72 Points )

Answer 4

-2voto

prajeesh loremine Points 41

div {
    background: inherit;
    width: 250px;
    height: 350px;
    position: absolute;
    overflow: hidden;  /* Adding overflow hidden */
}

div:before {
    content: ‘’;
    width: 300px;
    height: 400px;
    background: inherit;
    position: absolute;
    left: -25px;  /* Giving minus -25px left position */
    right: 0;
    top: -25px;   /* Giving minus -25px top position */
    bottom: 0;
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);
    filter: blur(10px);
}

Répondu el 26 de Février, 2018 par prajeesh loremine (41 Points )

Answer 5

-6voto

user7226407 Points 1

Si vous souhaitez que le contenu puisse défiler, définissez la position du contenu comme absolue :

content {
   position: absolute;
   ...
}

Je ne sais pas si c'était juste pour moi, mais si ce n'est pas le cas, c'est la solution !

Aussi puisque l'arrière-plan est fixe, cela signifie que vous avez une "parallaxe" effet ! Donc maintenant, non seulement cette personne vous a appris à faire un fond flou, mais c'est aussi un effet de fond parallaxe !

Répondu el 29 de Novembre, 2016 par user7226407 (1 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: