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

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 ?

Answer 1

Maintenant, cela devient encore plus simple et plus flexible grâce à l'utilisation de CSS GRID, il suffit de faire chevaucher le fond bleu (imgbg) avec le texte (h2).

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

et le css :

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }

     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

Answer 2

La grille CSS est plus facile à comprendre pour moi :)

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 1fr 6fr 1fr;
  grid-template-areas: 
  '. . .'
  '. content .'
  '. . .'; 
  justify-content: center;
  align-items: center;
}

.backbround {
  width: 100%;
  height: 100%;

  grid-area: 1/1/5/5;

  background-image: url(https://i.imgur.com/aUhpEz3.jpg);
  filter: blur(5px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  height: 200px;
  position: relative;

  grid-area: content;
  display: flex;

  justify-content: center;
  align-items: center;
  color: white;
}

<div class="container">
  <div class="backbround"></div>
  <div class="content"><h1>Hello World</h1></div>
</div>

Answer 3

Cette réponse est pour un Conception matérielle mise en page d'une carte horizontale avec une hauteur dynamique et une image.

Pour éviter toute distorsion de l'image due à la hauteur dynamique de la carte, vous pourriez utiliser une image de fond de type placeholder avec un flou qui s'ajuste aux changements de hauteur.

Explication

• La carte est contenue dans un <div> avec la classe emballage qui est un flexbox.
• La carte est composée de deux éléments, une image qui est aussi un lien et un contenu. lien, et un contenu.
• Le lien <a> , la classe lien est positionné relatif .
• Le lien se compose de deux sous-éléments, d'un élément de remplacement. <div> classe flou et un <img> classe image qui est l'image claire.
• Les deux sont positionnés absolu et ont width: 100% mais la classe image a un ordre d'empilement plus élevé, c'est-à-dire, z-index: 2 ce qui le place au-dessus de l'espace réservé.
• L'image d'arrière-plan de l'espace réservé flou est définie par le biais de l'option style en ligne dans le HTML.

Code

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

Answer 4

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Answer 5

Je n'ai pas écrit cela, mais j'ai remarqué qu'il y avait un polyfill pour le support partiel backdrop-filter à l'aide du compilateur CSS SASS, donc si vous disposez d'un pipeline de compilation, il peut être réalisé de manière satisfaisante (il utilise également TypeScript) :

https://codepen.io/mixal_bl4/pen/EwPMWo