Heim > Web-Frontend > CSS-Tutorial > Wie kann ich den Hintergrund eines Divs verwischen, ohne seine untergeordneten Elemente zu verwischen?

Wie kann ich den Hintergrund eines Divs verwischen, ohne seine untergeordneten Elemente zu verwischen?

Susan Sarandon
Freigeben: 2024-12-19 14:36:09
Original
703 Leute haben es durchsucht

How Can I Blur a Div's Background Without Blurring Its Child Elements?

Ein Div verwischen, ohne die untergeordneten Elemente zu beeinflussen: Eine Anleitung

Beim Anwenden einer Unschärfe auf ein Div stehen Benutzer oft vor der Herausforderung, dass es unbeabsichtigt zu einer Unschärfe kommt Auch untergeordnete Elemente werden verwischt. Um dieses Problem zu beheben, ist es wichtig, die Einschränkungen der Unschärfe- und Deckkrafteigenschaften in CSS zu verstehen. Standardmäßig wirken sich diese Eigenschaften sowohl auf die darin enthaltenen übergeordneten als auch untergeordneten Elemente aus.

Alternative Lösung: Inhalt und Hintergrund trennen

Um das Verwischen untergeordneter Elemente zu vermeiden, besteht eine praktikable Lösung darin: Erstellen Sie zwei separate Elemente innerhalb des übergeordneten Div: eines für den Hintergrund und eines für das Inhalt.

Implementierung:

  1. Setzen Sie die Position des übergeordneten Divs auf „relativ“.
  2. Erstellen Sie ein untergeordnetes Element für den Hintergrund und legen Sie es fest seine Position auf „absolut“, mit den Werten „oben“, „rechts“, „unten“ und „links“ von 0 (oder legen Sie seine Höhe und Breite auf fest). 100 %).
  3. Wenden Sie die Unschärfe- oder Deckkrafteigenschaft auf das untergeordnete Hintergrundelement an.

Durch die Isolierung des Hintergrunds auf diese Weise wird das untergeordnete Inhaltselement nicht von der Unschärfe beeinflusst oder auf das übergeordnete Element angewendete Deckkraft div.

Beispiel:

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

#content {
  /* Content properties here */
}
Nach dem Login kopieren
<div>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich den Hintergrund eines Divs verwischen, ohne seine untergeordneten Elemente zu verwischen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage