Wie verwischt man ein Hintergrundbild, ohne die Klarheit des Inhalts zu beeinträchtigen?

Hintergrundbild unscharf machen, ohne den Inhalt zu beeinträchtigen

In diesem Beispiel besteht das Ziel darin, das Hintergrundbild unscharf zu machen, ohne die Klarheit des zu beeinträchtigen Inhalt (in diesem Fall ein span-Element).

Problem

Beim Anwenden des Unschärfeeffekts auf das Hintergrundbild mithilfe von CSS wird der Inhalt innerhalb des Elements ebenfalls unscharf . Dies stellt eine Herausforderung für die Wahrung der Lesbarkeit des Textes oder anderer Inhalte dar.

Lösung

Um den gewünschten Effekt zu erzielen, können CSS-Pseudoklassen verwendet werden. Die Pseudoklasse :before ist perfekt für dieses Szenario. So geht's:

1. Umschließen Sie den Inhalt innerhalb einer bestimmten Klasse (z. B. „blur-bgimage“):

<code class="html"><div class="blur-bgimage">
  <span>Main Content</span>
</div></code>

2. Formatieren Sie Folgendes: before-Pseudoelement innerhalb der Klasse, um das Hintergrundbild nachzuahmen und den Unschärfeeffekt anzuwenden:

<code class="css">.blur-bgimage:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: inherit;
  z-index: -1;
  filter: blur(10px);  // Adjust the blur radius as desired
  transition: all 2s linear;
}</code>

3. Das :before-Pseudoelement überlagert den Inhalt, erbt das Hintergrundbild und wendet den Unschärfeeffekt an . Der negative Z-Index positioniert es hinter dem Inhalt.
4. Das Hinzufügen der Klasse „blur-bgimage“ zum übergeordneten Container löst den Unschärfeeffekt aus, während das Entfernen die ursprüngliche Klarheit wiederherstellt.

Dies Die Methode verwischt effektiv das Hintergrundbild und behält gleichzeitig die Schärfe des Inhalts innerhalb des Elements bei.

Das obige ist der detaillierte Inhalt vonWie verwischt man ein Hintergrundbild, ohne die Klarheit des Inhalts zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!