Einführung in die Verwendung von CSS3-Filterattributen

Einführung in die Verwendung von CSS3-Filterattributen

1. Einleitung

Beim Schreiben von Animationseffekten für Frontend-Seiten wird das Filterattribut mehr oder weniger verwendet. Da es zu viele Attributwerte gibt, dient dieser Artikel zum Organisieren und Aufzeichnen der zugehörigen Informationen.

II. Einleitung

Das Filterattribut definiert einen visuellen Effekt auf einem Element (normalerweise ).

Die Eigenschaftswerte lauten wie folgt:

Eigenschaftswert beschreiben
keiner Standardwert, keine Auswirkung.
Unschärfe (px) Stellen Sie den Gaußschen Weichzeichner auf das Bild ein. Der Standardwert ist 0.
Helligkeit(%) Wendet eine lineare Multiplikation auf das Bild an, wodurch es heller oder dunkler erscheint. Der Standardwert ist 1.
Kontrast(%) Passen Sie den Kontrast des Bildes an. Der Standardwert ist 1.
Graustufen (%) Konvertiert das Bild in Graustufen. Der Standardwert ist 0.
Farbton-Drehung (Grad) Wendet eine Farbtonrotation auf das Bild an. Der Standardwert ist 0 Grad.
umkehren(%) Invertiert das Eingabebild. Der Standardwert ist 0.
Opazität(%) Der Transparenzgrad des konvertierten Bildes. Der Standardwert ist 1.
Sättigen(%) Bildsättigung konvertieren, der Standardwert ist 1.
Sepia(%) Konvertiert das Bild in Sepia. Der Standardwert ist 0.

Hinweis: Filter werden normalerweise als Prozentsätze (z. B. 75 %) ausgedrückt, können aber auch als Dezimalzahlen (z. B. 0,75) ausgedrückt werden.

3. Demonstrationscode

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <Stil>
        .container {
            Rand: 4rem auto;
            Breite: 100 %;
            Höhe: automatisch;
            Textausrichtung: zentriert;
        }

        .Kasten {
            Anzeige: Inline-Block;
            Rand: 1rem;
        }

        .box ul {
            Rand: 0;
            Polsterung: 0;
            Listenstil: keiner;
            Textausrichtung: links;
        }

        .box ul li {
            Rand: .25rem 0;
            Polsterung: .25rem;
            Cursor: Zeiger;
        }

        .box ul li:hover {
            Hintergrundfarbe: #eee;
        }

        ul li.aktiv {
            Hintergrundfarbe: #eee;
        }

       .box img {
            Breite: 260px;
            Höhe: 260px;
        }

    </Stil>
</Kopf>
<Text>
    <div Klasse="Container">
        <h3>Klicken Sie auf die linke Seite, um die Eigenschaften anzuzeigen</h3>
        <div Klasse="Box">
            <ul>
                <li data-p="blur(5px)">Filter: Unschärfe(5px)</li>
                <li data-p="Helligkeit(.5)">Filter: Helligkeit(.5)</li>
                <li data-p="Kontrast(.5)">Filter: Kontrast(.5)</li>
                Filter: Graustufen(1)
                <li data-p="Farbton-Drehung(90 Grad)">Filter: Farbton-Drehung(90 Grad)</li>
                <li data-p="invert(.4)">Filter: invert(.4)</li>
                <li data-p="opacity(.4)">Filter: Opazität(.4)</li>
                Filter: sättigen (.5)
                <li data-p="sepia(.5)">Filter: sepia(.5)</li>
            </ul>
        </div>
        <div Klasse="Box">
            <div Klasse="Herkunft">
                <img src="upload/2022/web/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div>Originalbild</div>
        </div>
        <div Klasse="Box">
            <div id="filter">
                <img src="upload/2022/web/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div id="info">Wirkungsdiagramm</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <Skript>
        $(Funktion() {
                sei $lis = $("li");
               $lis.on("klicken", function() {
                    $lis.removeClass("aktiv");
                    sei p = $(this).addClass("active").data("p");
                    $("#filter").css({"filter": p});
                    $("#info").text("filter: " + p);
               });
        });
    </Skript>
</body>
</html>

Oben finden Sie eine ausführliche Einführung in die Verwendung von CSS3-Filterattributen. Weitere Informationen zu CSS3-Filterattributen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<:  MySQL-Import- und Export-Sicherungsdetails

>>:  Eine kurze Diskussion zum Problem, dass der Text in der Schaltfläche im Kompatibilitätsmodus des Browsers nicht vertikal zentriert ist

Artikel empfehlen

CSS-Namenskonventionen (Regeln), die es wert sind, gesammelt zu werden Häufig verwendete CSS-Namensregeln

CSS-Benennungskonventionen (Regeln) Häufig verwen...

Grafisches IDEA-Tutorial zum Konfigurieren des Tomcat-Servers und Veröffentlichen von Webprojekten

1. Nachdem Sie das Webprojekt erstellt haben, müs...

Tutorial zur Installation von Odoo14 aus dem Quellcode unter Ubuntu 18.04

Inhaltsverzeichnis Hintergrund dieser Serie Überb...

Beispiel für die Verwendung eines manipulationssicheren JavaScript-Objekts

Inhaltsverzeichnis Manipulationssicheres Javascri...

Lösung für das Problem, dass das direkte Festlegen der Breite und Höhe eines Hyperlinks nicht funktioniert

Eine direkte Verwendung von Breite und Höhe ist ni...

Eine kurze Erläuterung zur Verwendung des kartesischen Produktprinzips zum Abfragen mehrerer Tabellen in MySQL

MySQL-Mehrtabellenabfrage (kartesisches Produktpr...

So deaktivieren Sie Anzeigen in der Terminal-Willkommensnachricht in Ubuntu Server

Wenn Sie die neueste Ubuntu Server-Version verwen...

So installieren Sie mehrere mysql5.7.19 (tar.gz)-Dateien unter Linux

Informationen zur ersten Installation der MySQL-5...

Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten

Einfaches Beispiel für das Hinzufügen und Entfern...

MySQL-Installation mehrerer Instanzen - Boot- und Autostart-Dienstkonfigurationsprozess

1. Mehrere MySQL-Instanzen MySQL Multi-Instance b...

Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung

Vererbung von Prototypketten Die Prototypenvererb...

Zwei spezielle Werte in CSS werden verwendet, um die Vererbungs- und Initialisierungsmethoden der Kaskade zu steuern

Es gibt zwei spezielle Werte, die jeder Eigenscha...

Grundlegende Konzepte und Anwendungsbeispiele für HTML-Inline-Elemente und Block-Level-Elemente

Es gibt zwei Arten von HTML-Tags: Inline-Elemente...

So installieren und verwenden Sie Server-U Version 14

Einführung der Server-U-Software Server-U ist ein...

Wann sollte man Map anstelle einfacher JS-Objekte verwenden?

Inhaltsverzeichnis 1. Map akzeptiert jeden Schlüs...