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

Verwenden Sie CSS, um 3D-konvexe und konkave Effekte auf Bildern zu erzielen (konvex aus dem Rahmen heraus oder konkav im Rahmen).

Ⅰ. Problembeschreibung: Verwenden Sie CSS, um kon...

MySQL-FAQ-Serie: So vermeiden Sie eine plötzliche Vergrößerung der ibdata1-Datei

0. Einleitung Was ist die ibdata1-Datei? ibdata1 ...

Detaillierte Erläuterung der Destrukturierungszuweisung von JS ES6-Variablen

Inhaltsverzeichnis 1. Was ist Dekonstruktion? 2. ...

Vue implementiert Baumtabelle

In diesem Artikelbeispiel wird der spezifische Co...

MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten

Die in MySQL integrierte Datumsfunktion TIMESTAMP...

Natives JavaScript-Message Board

In diesem Artikel wird der spezifische JavaScript...

js generiert dynamisch Tabellen (Knotenoperationen)

In diesem Artikelbeispiel wird der spezifische Co...

Lösen Sie das Problem der Groß- und Kleinschreibung der Linux+Apache-Server-URL

Ich bin heute auf ein Problem gestoßen. Beim Eing...

CUDA8.0 und CUDA9.0 koexistieren unter Ubuntu16.04

Vorwort Einige der früheren Codes auf Github erfo...

Detaillierte Erläuterung der MySQL-Benutzerrechteverwaltung

Inhaltsverzeichnis Vorwort: 1. Einführung in die ...

Drei Möglichkeiten, um zu verhindern, dass MySQL doppelte Daten einfügt

Erstellen einer neuen Tabelle CREATE TABLE `Perso...

Lösung für den Fehler bei der Verbindung mit MySQL in Docker

Szenario: Nach der Installation der neuesten Vers...

JavaScript implementiert einfache Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Ja...

Detaillierte Erläuterung des Prozesses zum Abfragen von Benutzerberechtigungen mithilfe von MySQL-Anweisungen

Wie können Sie in MySQL die Berechtigungen anzeig...

Erste Schritte mit TS (TypeScript) im Vue-Projekt

Inhaltsverzeichnis 1. Einführung in Typescript 2....