Comment Appliquer un Filtre de Flou à l'Image de l'Arrière-Plan

Dans ce snippet, nous allons montrer comment appliquer un filtre de flou à l'image de l'arrière-plan. Cela est très simple et rapide!

Suivez ces étapes et créez une image floue de l'arrière-plan pour votre site web.

1. Créez HTML

  • Commencez par créer un <div> avec une classe de "image".
  • Créez un autre élément <div> avec une classe nommée "text".
<div class="image"></div>
<div class="text">
  <h1>W3DOCS</h1>
  <h2>Blurred Background Image</h2>
  <p>Snippet</p>
</div>

2. Ajoutez CSS

  • Copiez et collez le lien de l'image.
.image{background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
  • Définissez la hauteur de l'image avec la propriété height, puis spécifiez la position de l'image avec la propriété background-position.
.image {
  height: 100%;
  background-position: center;
}

Ici, nous avons définie la valeur "center".

  • Après l'application de background-position, rendez l'image non répétée en définissant la propriété background-repeat à"no-repeat".
.image {
  background-repeat: no-repeat;
}
  • Spécifiez la propriété background-size à "cover" qui éscaille l'image de l'arrière-plan aussi grande que possible pour qu'elle occupe tout l'espace de fond. 
.image {
  background-size: cover;
}
  • Maintenant on doit utiliser la propriété filter pour rend l'image floue. La propriété filter a une valeur "blur" qui applique l'effet de floue à une image. Elle est spécifiée par px. Ici on a spécifié 5px.
.image {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}
N'oubliez pas d'ajouter -Webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -ms- pour Internet Explorer, -Moz- pour Firefox, -o- pour les plus anciennes versions d'Opera avec la propriété filter.

Voici ce que nous avons. Nous allons arriver à la fin.

.image {
  background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

Donc, maintenant créeons un texte qui sera appliqué à l'image de l'arrière-plan.

  1. Commencez par créer un div avec une classe .image.
.text {
  color: #eeeeee;
  font-weight: bold;
  border: 3px solid #cccccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

Voyons le résultat.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
        font-size: 30px;
      }
      .image {
        background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
      }
      .text {
        color: #eeeeee;
        font-weight: bold;
        border: 3px solid #cccccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="image"></div>
    <div class="text">
      <h1>W3DOCS</h1>
      <h2>L'image floue de l'arrière-plan</h2>
      <p>Snippet</p>
    </div>
  </body>
</html>

Voyons un autre exemple avec l'image floue de l'arrière-plan.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .background-image {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 1;
        display: block;
        background-image: url(" /uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
        width: 1200px;
        height: 800px;
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
      }
      .content {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 9999;
        margin-left: 20px;
        margin-right: 20px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :checked</h2>
    <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>
  </body>
</html>