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

JavaScript-Verlaufsobjekt erklärt

Inhaltsverzeichnis 1. Routennavigation 2. API zur...

Vue simuliert die Warenkorb-Abrechnungsfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Linux nutzt duale Netzwerkkartenbindung und Schraubendreherschnittstelle

Was ist eine Bindung? NIC-Bond ist eine Technolog...

So kapseln Sie Axios in ein Vue-Projekt (einheitliche Verwaltung von HTTP-Anfragen)

1. Voraussetzungen Bei der Entwicklung von Front-...

Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)

Ich habe schon einmal einen solchen Artikel gesch...

Lösung zum Verlassen von Lücken zwischen BootStrap-Rastern

Inhaltsverzeichnis [Siehe ein Beispiel]: [Der urs...

Grundkenntnisse der MySQL-Datenbank

Inhaltsverzeichnis 1. Datenbanken verstehen 1.1 D...

Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.

Fragen zu Select-Elementen in HTML wurden an viel...

Grafisches Tutorial zur Installation und Konfiguration von mysql8.0.11 winx64 (win10)

Das Installationstutorial für MySQL 8.0.11 WinX64...

Eine schnelle Lösung für das Problem der PC- und Mobilanpassung

Beim Erstellen einer Webseite müssen wir normaler...

Zusammenfassung und Analyse häufig verwendeter Docker-Befehle und Beispiele

Inhalt 1. Container-Lebenszyklusmanagement (1) Do...

Best Practices-Handbuch für partitionierte MySQL-Tabellen

Vorwort: Partitionierung ist ein Tabellenentwurfs...

Verwendung der JavaScript-Sleep-Funktion

Inhaltsverzeichnis 1. Schlaffunktion 2. setTimeou...

Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)

Vorwort Excel ist leistungsstark und weit verbrei...

JavaScript realisiert den Effekt der mobilen Modalbox

In diesem Artikelbeispiel wird der spezifische Ja...