Detaillierte Erläuterung der CSS-Unschärfeeigenschaften: Filter und Hintergrundfilter

Detaillierte Erklärung des CSS-Unschärfeattributs: Filter und Hintergrundfilter

Einführung:
Beim Entwerfen von Webseiten benötigen wir häufig einige Spezialeffekte, um die visuelle Attraktivität der Seite zu erhöhen. Der Unschärfeeffekt ist einer der häufigsten Spezialeffekte. CSS bietet zwei Unschärfeattribute: Filter und Hintergrundfilter, die zum Unschärfen von Elementinhalten bzw. Hintergrundinhalten verwendet werden. In diesem Artikel werden diese beiden Eigenschaften ausführlich erläutert und einige konkrete Codebeispiele bereitgestellt.

1. Filterattribut

Das Filterattribut wird verwendet, um den Inhalt von Elementen zu verwischen. Es kann eine Vielzahl unterschiedlicher Effekte erzielen, darunter Gaußsche Unschärfe, Helligkeitsanpassung, Kontrastanpassung und mehr. Nachfolgend sind einige häufig verwendete Filterattributwerte und ihre Auswirkungen aufgeführt.

1. Gaußsche Unschärfe (Unschärfe): Dieses Attribut kann verwendet werden, um Elementen einen Unschärfeeffekt hinzuzufügen. Je größer der Wert, desto größer die Unschärfe.

.blur {
  filter: blur(5px);
}

2. Helligkeitsanpassung (Helligkeit): Mit diesem Attribut können Sie die Helligkeit des Elements anpassen. Werte kleiner 1 werden dunkler, Werte größer 1 heller.

.brightness {
  filter: brightness(0.5);
}

3. Kontrastanpassung (Kontrast): Über dieses Attribut können Sie den Kontrast des Elements anpassen. Werte kleiner 1 verringern den Kontrast, Werte größer 1 erhöhen den Kontrast.

.contrast {
  filter: contrast(2);
}

4. Farbeffekt umkehren (invertieren): Mit diesem Attribut kann dem Element ein inverser Farbeffekt hinzugefügt werden.

.invert {
  filter: invert(100%);
}

5. Hue rotation (hue-rotate): Dieses Attribut kann den Farbton des Elements drehen.

.hue-rotate {
  filter: hue-rotate(90deg);
}

2. Hintergrundfilterattribut

Das Hintergrundfilterattribut wird verwendet, um den Hintergrundinhalt des Elements unscharf zu machen. Seine Verwendung ähnelt dem Filterattribut, funktioniert jedoch auf dem Hintergrund des Elements und nicht auf dem Inhalt des Elements selbst. Nachfolgend sind einige häufig verwendete Hintergrundfilter-Eigenschaftswerte und ihre Auswirkungen aufgeführt.

1. Gaußsche Unschärfe (Unschärfe): Mit diesem Attribut kann dem Hintergrund des Elements ein Unschärfeeffekt hinzugefügt werden. Je größer der Wert, desto größer die Unschärfe.

.backdrop-blur {
  backdrop-filter: blur(5px);
}

2. Helligkeitsanpassung (Helligkeit): Mit diesem Attribut können Sie die Hintergrundhelligkeit des Elements anpassen. Werte kleiner 1 werden dunkler, Werte größer 1 heller.

.backdrop-brightness {
  backdrop-filter: brightness(0.5);
}

3. Kontrastanpassung (Kontrast): Mit diesem Attribut kann der Hintergrundkontrast des Elements angepasst werden. Werte kleiner 1 verringern den Kontrast, Werte größer 1 erhöhen den Kontrast.

.backdrop-contrast {
  backdrop-filter: contrast(2);
}

4. Farbeffekt umkehren (invertieren): Mit diesem Attribut kann dem Hintergrund des Elements ein inverser Farbeffekt hinzugefügt werden.

.backdrop-invert {
  backdrop-filter: invert(100%);
}

5. Hue rotation (hue-rotate): Dieses Attribut kann den Hintergrundfarbton des Elements drehen.

.backdrop-hue-rotate {
  backdrop-filter: hue-rotate(90deg);
}

Fazit:
Die Filter- und Hintergrundfiltereigenschaften von CSS bieten uns eine reiche Auswahl an Unschärfeeffekten, die das Design von Webseiten farbenfroher gestalten. Durch die sinnvolle Verwendung dieser Attribute kann die Seite einen cooleren Effekt erzielen. Es ist jedoch zu beachten, dass bei der Verwendung dieser Attribute bei verschiedenen Browsern Kompatibilitätsprobleme auftreten können. Daher sind bei der tatsächlichen Verwendung Kompatibilitätstests erforderlich, um die Konsistenz der Effekte sicherzustellen.

Referenzlink:

• [MDN-Webdokumente: Filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)
• [MDN-Webdokumente: Hintergrundfilter]( https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Unschärfeeigenschaften: Filter und Hintergrundfilter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!