Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS

Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS

Das Filterattribut definiert die visuelle Wirkung eines Elements

verwischen

  • Wenden Sie eine Gaußsche Unschärfe auf das Bild an. Der „Radius“-Wert legt die Standardabweichung der Gauß-Funktion fest, also wie viele Pixel auf dem Bildschirm miteinander vermischt werden, sodass höhere Werte zu mehr Unschärfe führen.
  • Wenn kein Wert festgelegt ist, ist der Standardwert 0; dieser Parameter kann den CSS-Längenwert festlegen, akzeptiert jedoch keine Prozentwerte.

Helligkeit

Wendet eine lineare Multiplikation auf das Bild an, wodurch es heller oder dunkler erscheint. Wenn der Wert 0 % beträgt, ist das Bild vollständig schwarz. Ein Wert von 100 % bewirkt keine Veränderung am Bild. Andere Werte entsprechen einem linearen Multiplikatoreffekt. Werte über 100 % sind möglich und das Bild wird heller als zuvor. Wenn kein Wert festgelegt ist, ist der Standardwert 1.

Nachteile

tPassen Sie den Kontrast des Bildes an. Bei einem Wert von 0 % wird das Bild vollkommen schwarz. Bei einem Wert von 100% bleibt das Bild unverändert. Werte können 100 % überschreiten, was bedeutet, dass ein geringerer Kontrast verwendet wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1.

Graustufen

Konvertieren Sie das Bild in Graustufen. Der Wert definiert den Maßstab der Konvertierung. Ein Wert von 100 % konvertiert das Bild vollständig in Graustufen, und ein Wert von 0 % lässt das Bild unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn nicht festgelegt, ist der Wert standardmäßig 0;

Farbton-Rotation

Wendet eine Farbtonrotation auf das Bild an. Der Wert „Winkel“ legt den Farbradwinkel fest, an den das Bild angepasst wird. Wenn der Wert 0 Grad beträgt, ändert sich das Bild nicht. Wenn der Wert nicht festgelegt ist, beträgt der Standardwert 0 Grad. Obwohl es für diesen Wert keinen Maximalwert gibt, entspricht ein Wert über 360 Grad einer zweiten Drehung.

inver

tInvertiert das Eingabebild. Der Wert definiert den Maßstab der Konvertierung. Ein Wert von 100 % stellt eine komplette Umkehrung dar. Ein Wert von 0 % bewirkt keine Veränderung am Bild. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn der Wert nicht festgelegt ist, beträgt der Standardwert 0.

Opazität

Wandelt die Transparenz des Bildes um. Der Wert definiert den Maßstab der Konvertierung. Ein Wert von 0 % ist völlig transparent und ein Wert von 100 % lässt das Bild unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts, was einer Multiplikation der Bildproben mit dem Betrag gleichkommt. Wenn der Wert nicht festgelegt ist, beträgt der Standardwert 1. Diese Funktion ist der vorhandenen Opazitätseigenschaft sehr ähnlich, mit der Ausnahme, dass einige Browser eine Hardwarebeschleunigung durch Filter bereitstellen, um die Leistung zu verbessern.

sättigen

Bildsättigung konvertieren. Der Wert definiert den Maßstab der Konvertierung. Ein Wert von 0 % führt zu einer vollständigen Entsättigung, während ein Wert von 100 % keine Änderung am Bild zur Folge hat. Bei anderen Werten handelt es sich um lineare Multiplikatoren des Effekts. Werte über 100 % sind zulässig, was eine höhere Sättigung ergibt. Wenn der Wert nicht festgelegt ist, beträgt der Standardwert 1.

Sepia

Wandelt das Bild in Sepia um. Der Wert definiert den Maßstab der Konvertierung. Ein Wert von 100 % führt zu einer reinen Sepiafarbe, und ein Wert von 0 % bewirkt keine Änderung am Bild. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn nicht festgelegt, ist der Wert standardmäßig 0;

Schlagschatten

Legen Sie einen Schatteneffekt für das Bild fest. Schatten werden unter dem Bild zusammengesetzt, können unscharf gemacht werden und sind versetzte Versionen einer Maske, die in einer bestimmten Farbe gemalt werden kann. Die Funktion akzeptiert Werte vom Typ <shadow> (definiert im CSS3-Hintergrund), außer dass das Schlüsselwort „inset“ nicht zulässig ist. Diese Funktion ist der vorhandenen Box-Shadow-Eigenschaft sehr ähnlich. Der Unterschied besteht darin, dass einige Browser durch den Filter eine Hardwarebeschleunigung für eine bessere Leistung bereitstellen. 

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
</Kopf>
<Stil>
    Körper {
        Hintergrundfarbe: #000;
        Farbe: himmelblau;
    }
    div {
        Rand: 1px durchgezogen #fff;
        Polsterung: 10px;
        Breite: 610px;
        Rand: 10px;
    }
    .unschärfe1 {
        Filter: Unschärfe (0,4px);
    }

    .unschärfe2 {
        Filter: Unschärfe (1px);
    }

    .unschärfe3 {
        Filter: Unschärfe (4px);
    }

    .Helligkeit1 {
        Filter: Helligkeit (0,30);
    }

    .Helligkeit2 {
        Filter: Helligkeit (0,8);
    }

    .Helligkeit3 {
        Filter: Helligkeit (1);
    }

    .Kontrast1 {
        Filter: Kontrast (10 %);
    }

    .kontrast2 {
        Filter: Kontrast (50 %);
    }

    .Kontrast3 {
        Filter: Kontrast (100 %);
    }

    .graustufen1 {
        Filter: Graustufen (10 %);
    }

    .graustufen2 {
        Filter: Graustufen (50 %);
    }

    .graustufen3 {
        Filter: Graustufen (100 %);
    }

    .huerotate1 {
        Filter: Farbton-Drehung (0 Grad);
    }

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

    .huerotate3 {
        Filter: Farbton-Drehung (180 Grad);
    }

    .invert1 {
        Filter: invertieren (20 %);
    }

    .invert2 {
        Filter: invertieren (60 %);
    }

    .invert3 {
        Filter: invertieren (100 %);
    }

    .opacity1 {
        Filter: Deckkraft (10 %);
    }

    .opacity2 {
        Filter: Deckkraft (80 %);
    }

    .opacity3 {
        Filter: Deckkraft (100 %);
    }

    .saturate1 {
        Filter: sättigen (0,2);
    }

    .saturate2 {
        Filter: sättigen (0,6);
    }

    .saturate3 {
        Filter: sättigen(1);
    }

    .sepia1 {
        Filter: Sepia (10 %);
    }

    .sepia2 {
        Filter: Sepia (60 %);
    }

    .sepia3 {
        Filter: Sepia (100 %);
    }

    .shadow1 {
        Filter: Schlagschatten (2px 2px 2px rot);
    }

    .shadow2 {
        Filter: Schlagschatten (8px 8px 1px lila);
    }

    .shadow3 {
        Filter: Schlagschatten (1px 1px 10px Hotpink);
    }
</Stil>

<Text>
    <div Klasse="Filter1">
        <p>Zeichnen Sie einen Gaußschen Weichzeichner auf das Bild. Je größer der Wert, desto unschärfer ist es.</p>
        <ul>
            <li class="blur1">Unschärfe</li>
            <li class="blur2">Unschärfe</li>
            <li class="blur3">Unschärfe</li>
        </ul>
    </div>
    <div Klasse="Filter2">
        <p>Wendet eine lineare Multiplikation auf das Bild an, um es heller oder dunkler erscheinen zu lassen. Ein Wert von 0 macht das Bild komplett schwarz; ein Wert über 100% macht das Bild heller</p>
        <ul>
            <li class="brightness1">Helligkeit</li>
            <li class="brightness2">Helligkeit</li>
            <li class="brightness3">Helligkeit</li>
        </ul>
    </div>
    <div Klasse="filter3">
        <p>Bildkontrast anpassen. Ein Wert von 0 macht das Bild komplett schwarz; Werte über 100% verwenden noch geringeren Kontrast</p>
        <ul>
            <li class="contrast1">Kontrast</li>
            <li class="contrast2">Kontrast</li>
            <li class="contrast3">Kontrast</li>
        </ul>
    </div>
    <!-- <div class="filter4">
        <p>Unschärfe</p>
        <ul>
            <li class="blur1">Unschärfe</li>
            <li class="blur2">Unschärfe</li>
            <li class="blur3">Unschärfe</li>
        </ul>
    </div> -->
    <div Klasse="filter5">
        <p>Das Bild wird in Graustufen umgewandelt. Ein Wert von 0 bedeutet, dass das Bild nicht verändert wird. Ein Wert von 100 % bedeutet, dass das Bild vollständig in Graustufen umgewandelt wird.</p>
        <ul>
            <li class="grayscale1">Graustufen</li>
            <li class="grayscale2">Graustufen</li>
            <li class="grayscale3">Graustufen</li>
        </ul>
    </div>
    <div Klasse="filter6">
        <p>Wendet eine Farbtonrotation auf das Bild an. Wenn der Wert 0 Grad beträgt, ändert sich das Bild nicht; es gibt keinen Maximalwert und das Überschreiten von 360 Grad entspricht einer erneuten Drehung</p>
        <ul>
            <li class="huerotate1">huerotieren</li>
            <li class="huerotate2">huerotate</li>
            <li class="huerotate3">huerotate</li>
        </ul>
    </div>
    <div Klasse="filter7">
        <p>Invertiert das Eingabebild. 0 % bedeutet keine Änderung am Bild, 100 % bedeutet, dass das Bild vollständig umgekehrt wird</p>
        <ul>
            <li class="invert1">umkehren</li>
            <li class="invert2">umkehren</li>
            <li class="invert3">umkehren</li>
        </ul>
    </div>
    <div Klasse="filter8">
        <p>Invertiert die Transparenz eines Bildes. 0 %, völlig transparent; 100 % keine Bildänderung</p>
        <ul>
            <li class="opacity1">Deckkraft</li>
            <li class="opacity2">Deckkraft</li>
            <li class="opacity3">Deckkraft</li>
        </ul>
    </div>
    <div Klasse="filter9">
        <p>Konvertiert die Bildsättigung. 0 % völlig ungesättigt; 100 %, völlig gesättigt</p>
        <ul>
            <li class="saturate1">sättigen</li>
            <li class="saturate2">sättigen</li>
            <li class="saturate3">sättigen</li>
        </ul>
    </div>
    <div Klasse="filter10">
        <p>Das Bild wird in Sepia umgewandelt. Ein Wert von 100 % ist dunkelbraun; ein Wert von 0 % bedeutet keine Bildänderung</p>
        <ul>
            <li class="sepia1">Sepia</li>
            <li class="sepia2">Sepia</li>
            <li class="sepia3">Sepia</li>
        </ul>
    </div>
    <div Klasse="filter11">
        <p>Bildeinstellungen Schatteneffekt</p>
        <ul>
            <li class="shadow1">Schatten</li>
            <li class="shadow2">Schatten</li>
            <li class="shadow3">Schatten</li>
        </ul>
    </div>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  MySQL-Methode mit hoher Parallelität zum Generieren einer eindeutigen Bestellnummer

>>:  HTML-Tutorial: Titelattribut und Alt-Attribut

Artikel empfehlen

JavaScript implementiert eine bidirektionale verknüpfte Listenprozessanalyse

Inhaltsverzeichnis 1. Was ist eine doppelt verknü...

Analysieren Sie das Problem beim Herunterladen der Oracle 11g-Image-Konfiguration in Docker

1. Ziehen Sie das Bild Docker-Pull-Registrierung....

Detaillierte Erklärung basierend auf Event Bubbling, Event Capture und Event Delegation

Ereignis-Bubbling, Ereigniserfassung und Ereignis...

Tipps zum Listenaufbau für Website-Wartungsseiten

Und oft ist es für Wartungsarbeiten erforderlich, ...

So verwenden Sie DQL-Befehle zum Abfragen von Daten in MySQL

In diesem Artikel zeigt Ihnen der Blogger die häu...

Grundlegendes zur JavaScript-Prototypenkette

Inhaltsverzeichnis 1. Verständnis der Gleichheits...

Ausführliche Erklärung dieses Schlüsselworts in JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Verstehen Sie...

Spezifische Verwendung von CSS-Inhaltsattributen

Das Inhaltsattribut wird im Allgemeinen in den Ps...

Linux verwendet den Befehl lsof, um den Status des Dateiöffnens zu überprüfen

Vorwort Wir alle wissen, dass unter Linux „alles ...

MySQL max_allowed_packet-Einstellung

max_allowed_packet ist ein Parameter in MySQL, de...

CentOS verwendet expect, um Skripte und Befehle remote in Stapeln auszuführen

Manchmal müssen wir Server stapelweise bedienen, ...

Grafisches Tutorial zur Installation und Aktivierung von VMware Workstation 14 Pro

In diesem Artikel erfahren Sie alles über die Ins...

Implementierung einer Lösung für adaptive Textbereichshöhe in Vue

Inhaltsverzeichnis Versteckte Probleme Lösung zur...

Zusammenfassung der Verwendung von Linux-SFTP-Befehlen

sftp ist die Abkürzung für Secure File Transfer P...

Docker Nginx-Container und Tomcat-Container zur Realisierung von Lastausgleich und dynamischen und statischen Trennungsvorgängen

Tomcat8-Image herunterladen [root@localhost ~]# D...