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

Einige Fähigkeiten, die Sie beim Erstellen von Webseiten kennen müssen

1. Z-Index ist in IE6 ungültig. In CSS wird die E...

Einführung in bedingte Zugriffsattribute und Pfeilfunktionen in JavaScript

Inhaltsverzeichnis 1. Bedingte Zugriffsattribute ...

Implementierung eines einfachen Whack-a-Mole-Spiels in JavaScript

In diesem Artikel finden Sie den spezifischen Cod...

Detaillierte Erklärung zur Installation der MySQL-Datenbank auf dem Alibaba Cloud Server

Vorwort Da ich während des Lernprozesses Zookeepe...

Reiner CSS-Header, korrigierter Implementierungscode

Es gibt zwei Hauptgründe, warum es schwierig ist,...

So verwenden Sie Webstorm und Chrome zum Debuggen von Vue-Projekten

Inhaltsverzeichnis Vorwort 1. Erstellen Sie ein n...

Erste Schritte mit Mysql - SQL-Ausführungsprozess

Inhaltsverzeichnis 1. Prozess 2. Kernarchitektur ...

Web 2.0: Ursachen und Lösungen der Informationsüberflutung

<br />Informationsduplikation, Informationsü...

Zusammenfassung der allgemeinen MySQL-Funktionen

Vorwort: Die MySQL-Datenbank bietet eine breite P...

Detaillierte Erklärung zur korrekten Verwendung der Zählfunktion in MySQL

1. Beschreibung Wenn wir in MySQL die Gesamtzahl ...

Ohne zu viel Code können Sie Hyperlinks verwenden, um einfache und schöne benutzerdefinierte Kontrollkästchen zu implementieren

Heute ist mir plötzlich aufgefallen, dass die Stil...

Detaillierte Erläuterung von acht Methoden zum Korrigieren des CSS-Seitenendes

Beim Schreiben einer Seite kommt es häufig vor, d...

So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus

Neulich habe ich rsync verwendet, um eine große D...

Das Vue-Projekt realisiert Anmelde- und Registrierungseffekte

In diesem Artikelbeispiel wird der spezifische Co...

Miniprogramm zur Implementierung der Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Co...