Detaillierte Erklärung der Anwendung und des Unterschieds zwischen Filterattribut und Hintergrundfilter in CSS

Es gibt einige Unterschiede zwischen Filter und Hintergrundfilter:

• Der Filter wirkt sich nicht nur auf das aktuelle Element aus, sondern auch auf untergeordnete Elemente. Auf ein Element mit leerem Hintergrund hat er keine Auswirkung.
• Der Hintergrundfilter verwischt die unteren Elemente durch die Ebene
• Mit der Eigenschaft „Hintergrundfilter“ können Sie dem Bereich hinter einem Element einen grafischen Effekt (z. B. eine Unschärfe oder eine Farbverschiebung) hinzufügen. Da er auf alle Elemente hinter dem Element angewendet wird, müssen Sie das Element oder seinen Hintergrund zumindest teilweise transparent machen, damit der Effekt sichtbar wird.
• Der Hintergrundfilter weist derzeit eine schlechte Kompatibilität auf, insbesondere auf mobilen Android-Geräten.

Filterattribute

Lassen Sie uns zuerst über das Filterattribut sprechen. Das Filterattribut in CSS3 ist einfach, benutzerfreundlich und leistungsstark. Diese Effekte können auf Bilder angewendet werden, um einige einzigartige Spezialeffekte zu erzielen. Und derzeit unterstützen bereits alle gängigen Browser dieses Attribut.

Aus dem obigen Bild können wir erkennen, dass die Kompatibilität mit den meisten Browsern gut ist.

Schauen wir es uns direkt mit Code an.

Körper {
  Anzeige: Flex;
  Breite: 100 %;
  Höhe: 100vh;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
}

.img {
  Breite: 500px;
  Höhe: 500px;
}

<Text>
    <img src="./img/kyoto.jpg" class="img filter">
</body>

Wir definieren ein Foto in der Mitte der Webseite, ohne eine Bearbeitung vorzunehmen.

Dies ist der Effekt des Originalbildes.

Sehen wir uns als Nächstes einige der wichtigeren Eigenschaften des Filters an.

Opazität

Opazität steht für Transparenz und der Wert ist eine Dezimalzahl zwischen 0 und 1. Je größer der Wert, desto geringer die Transparenz.

.Filter{
  Filter: Deckkraft (.3);
}

Wie in der folgenden Abbildung dargestellt:

verwischen

Mit Unschärfe können Sie das Bild so einstellen, dass der Gaußsche Unschärfeeffekt verwendet wird. Der Einheitenwert ist px. Bei der sogenannten Gaußschen Unschärfe handelt es sich um die Faltung eines Bildes mit der Wahrscheinlichkeitsdichtefunktion einer zweidimensionalen Gauß-Verteilung.

Einfach ausgedrückt: Die Gaußsche Unschärfe wird häufig verwendet, um den Effekt zu simulieren, dass Objekte im menschlichen Auge weiter und schneller werden. Bei der Fotobearbeitung wenden wir häufig eine Gaußsche Unschärfe auf den Hintergrund an, um ihn weiter entfernt erscheinen zu lassen und so die Personen oder Objekte im Vordergrund hervorzuheben. Einige sogenannte „Erst aufnehmen, später fokussieren“-Techniken nutzen ebenfalls den Gaußschen Unschärfeeffekt. Wenn Sie den Effekt eines sich schnell bewegenden Blickwinkels erzeugen möchten, können Sie auch die Gaußsche Unschärfe auf den Hintergrund anwenden.

.filter {
  Filter: Unschärfe (2px);
} 

umkehren

Mit „invert“ kann die invertierte Farbe eingestellt werden, der Wert ist eine Dezimalzahl zwischen 0 und 1.

.filter {
  Filter: invertieren(1);
} 

sättigen

Mit Sättigen können Sie die Sättigung des Fotos einstellen. Der Wertebereich kann eine Zahl sein. Der Standardwert ist 1, was 100 % bedeutet.

.filter {
  Filter: sättigen (5);
}

Hier habe ich beispielsweise die Sättigung auf 500 % eingestellt, wie unten gezeigt:

Graustufen

Graustufen stehen für Graustufen und ihr Wert liegt zwischen 0 und 1.

.filter {
  Filter: Graustufen(1);
}

Das Bild unten zeigt den Effekt, wenn die Graustufe 1 ist, d. h. die Graustufe beträgt 100 %.

Wenn im Effektparameter kein Wert vorhanden ist, wird der Standardwert 1 (also 100 %) verwendet, wie in den folgenden Einstellungen gezeigt.

.filter {
  Filter: Graustufen();
}

Sepia

Sepia stellt die braune Farbe des Fotos dar, ähnlich dem nostalgischen Effekt in den meisten Fotoverschönerungsprogrammen. Der Wert liegt ebenfalls zwischen 0 und 1, genau wie bei Graustufen.

.filter {
  Filter: Sepia(1);
}

Farbton-Rotation

Mit Hue-Rotate können Sie den Farbton des Bildes ändern. Der Standardwert ist 0 Grad und der Wert ist Winkel.

.filter {
  Filter: Farbton-Drehung (90 Grad);
} 

Hue-Rotate wird normalerweise mit CSS-Animationen verwendet, um verschiedene Effekte zu erzielen. Beispielsweise ändert sich in der Animation zum Laden der Batterie der Farbton-Rotationswert allmählich, wenn die Höhe auf der vertikalen Achse nach oben geht. Da wir hier keine Git-Bilder hochladen können, können wir nur statische Bilder sehen:

Helligkeit

Helligkeit kann die Helligkeit des Bildes ändern. Der Standardwert ist 100 %, also 1.

.filter {
   Filter: Helligkeit (2);
} 

Kontrast

Kontrast steht für Kontrast. Der Wert dieses Attributs ähnelt der Sättigung und ist ebenfalls eine Zahl.

.filter {
  Filter: Kontrast (2,5);
}

Hier demonstrieren wir den Effekt bei einem Kontrast von 250 % wie unten gezeigt:

Schlagschatten

Die Drop-Shadow-Eigenschaft ähnelt der Box-Shadow-Eigenschaft und fügt Bildern Schatten hinzu.

.filter {
  Filter: Schlagschatten (20px 20px 10px 20px #000) /**Horizontale Schattenposition, vertikale Schattenposition, Unschärfeabstand, Schattenfarbe**/
} 

Hintergrundfiltereigenschaften

Schauen wir uns die folgenden Funktionen des Backdrop-Filter-Attributs noch einmal an

• Der Hintergrundfilter verwischt die unteren Elemente durch die Ebene
• Mit der Eigenschaft „Hintergrundfilter“ können Sie dem Bereich hinter einem Element einen grafischen Effekt (z. B. eine Unschärfe oder eine Farbverschiebung) hinzufügen. Da er auf alle Elemente hinter dem Element angewendet wird, müssen Sie das Element oder seinen Hintergrund zumindest teilweise transparent machen, damit der Effekt sichtbar wird.
• Der Hintergrundfilter weist derzeit eine schlechte Kompatibilität auf, insbesondere auf mobilen Android-Geräten.

Das Obige ist nicht leicht zu verstehen, wenn man sich nur den Text ansieht, deshalb gehe ich direkt zum Code:

<div Klasse="Container">
  <div Klasse="Inhalt"></div>
  <div Klasse="Filter">
    Ist es möglich, an einem Ort zu sitzen, der consectetur, adipisicing elit ist? Possimus voluptatem velit quod placeat?
    Amorita,
    Die Corpora und das temporale Lob, die das Werk der einzelnen Erfinder darstellten, sind genau die Dinge, von denen gesagt wird, dass sie wahr seien.
    Anzeige
  </div>
</div>

Wir definieren ein Containerelement div, dessen untergeordnete Elemente zwei div-Elemente sind: Inhalt und Filter.

Körper {
  Rand: 0;
  Polsterung: 0;
}

.container {
  Breite: 100 %;
  Höhe: 100vh;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Hintergrundfarbe: Aqua;
}

.Inhalt {
  Position: absolut;
  unten: 40 %;
  Breite: 300px;
  Höhe: 300px;
  Hintergrundfarbe: blauviolett;
}

.filter {
  Position: absolut;
  unten: 0;
  Breite: 100 %;
  Höhe: 50%;
  Schriftgröße: 32px;
  Z-Index: 20;
}

Mit den oben genannten Elementen können wir das folgende Layout erhalten:

Zu diesem Zeitpunkt ändern wir das Filterelement auf

.filter {
  Position: absolut;
  unten: 0;
  Breite: 100 %;
  Höhe: 50%;
  Filter: Unschärfe (5px);
  Z-Index: 20;
  Schriftgröße: 32px;
}

Aus dem Code haben wir den Filter „Unschärfe (5px)“ hinzugefügt. Wie in der folgenden Abbildung gezeigt, können wir sehen, dass das Filterelement div und der darin enthaltene Textinhalt unscharf sind.

Aber wenn Sie den Stil wie folgt ändern

.filter {
  Position: absolut;
  unten: 0;
  Breite: 100 %;
  Höhe: 50%;
  Hintergrundfilter: Unschärfe (5px);
  Z-Index: 20;
  Schriftgröße: 32px;

}

Mit dem Element backdrop-filter: blur(5px) erhalten wir das folgende Layout:

Wir haben festgestellt, dass nur das Filterelement DIV unscharf war, während der Unterinhaltstext überhaupt nicht betroffen war.

.filter {
  Position: absolut;
  unten: 0;
  Breite: 100 %;
  Höhe: 50%;
  Hintergrundfarbe: Schokolade;
  Hintergrundfilter: Unschärfe (5px);
  Z-Index: 20;
  Schriftgröße: 32px;

}

Wenn wir die Hintergrundfarbe des Filterelements jedoch auf Schokolade einstellen, ist der Unschärfeeffekt fast unsichtbar.

Oder wir entfernen die Hintergrundfarbe des Inhaltselements DIV.

.Inhalt {
  Position: absolut;
  unten: 40%;
  Breite: 300px;
  Höhe: 300px;
} 

Damit der Effekt sichtbar wird, muss das Element bzw. sein Hintergrund deshalb zumindest teilweise transparent gemacht werden.

Wir haben festgestellt, dass die Hintergrundfiltereigenschaft nur bei einigen der neuesten Browserversionen wirksam ist. Daher ist die Kompatibilität dieser Eigenschaft derzeit schlecht.

Dies ist das Ende dieses Artikels über die Anwendung und den Unterschied von Filterattributen und Hintergrundfiltern in CSS. Weitere relevante Inhalte zu CSS-Filtern und Hintergrundfiltern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!