Beispielcode zur Implementierung eines Hintergrundunschärfeeffekts mit CSS

 <div Klasse="Login-Container">
     //Dieses div ist das Hintergrundbild <div class="beijing"></div>
     //Dieses div ist der angezeigte Inhaltsblock, also mein Logo und mein Login-Feld <div class="content"></div>
  </div>

 .login-container{
    Position: relativ;
    Breite: 100 %;
    Höhe: 100 %;
    Position: relativ;
    //Verwenden Sie das Flex-Layout, um die Anzeige des Inhaltsmoduls vertikal zu zentrieren: flex;
    Flex-Richtung: Spalte;
    Position: relativ; 
  }
 .beijing{ //Hintergrundbildstilbreite: 100 %;
    Höhe: 100%;
    Position: absolut;
    links: 0px;
    oben: 0px;
    Hintergrund: url('../../../static/img/timg (1).jpg');
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundgröße: Abdeckung;
    -Webkit-Filter: Unschärfe (10px);
    -moz-filter:unschärfe(10px);
    -o-Filter: Unschärfe (10px);
    -ms-filter:unschärfe(10px);
    Filter: Unschärfe (10px);
  }
.content{ //Breite des Inhaltsbildstils: 80 %;
	Höhe: 70%;
	Position: absolut;
	Z-Index: 5;
}