suchen

CSS-Filter

Feb 23, 2017 am 10:06 AM

Vorherige Wörter

Der CSS-Filter wird für Vorgänge wie Unschärfe, Schärfung und Verfärbung von Elementen verwendet. Er wird normalerweise auf Bilder, Hintergründe usw. angewendet. In diesem Artikel wird der CSS-Filter

Syntax

Filter

Anfangswert: keiner

Gilt für: Alle Elemente

Werte: keine |. rotieren () |. opacity() |. sepia() |. Kompatibilität: IE-Browser und Android4.3 – der Browser unterstützt es nicht hinzugefügt werden -webkit-prefix

  [Hinweis] Verwenden Sie Leerzeichen, um mehrere Filter zu trennen. Filter verwenden normalerweise Prozentsätze (z. B. 75 %) oder Dezimalzahlen (z. B. 0,75)

Graustufen

Graustufen

  Durch die Verwendung von Graustufen wird das Bild in Grau umgewandelt. Wenn der Wert 100 % beträgt, wird das Bild vollständig in ein Graustufenbild umgewandelt. Wenn der Wert 0 % beträgt, ändert sich das Bild nicht. Der Standardwert ist 0

Sättigung

saturate

  Ein Wert von 0 % bedeutet, dass das Bild vollständig entsättigt ist, und ein Wert von 100 % bedeutet, dass es keine Veränderung im Bild gibt. Werte über 100 % sind zulässig, was auf eine höhere Sättigung hinweist. Wenn der Wert nicht festgelegt ist, ist der Wert standardmäßig 1

  Verwenden Sie Sepia, um das Bild in Sepia umzuwandeln. Ein Wert von 100 % ergibt ein vollständiges Sepia, und ein Wert von 0 % lässt das Bild unverändert. Wenn nicht festgelegt, ist der Wert standardmäßig 0


Hue

hue-rotate

Farbton über Farbton auf das Bild anwenden -drehen Drehen. Der Wert „Winkel“ legt den Winkel des Farbkreises fest, um den das Bild angepasst wird. Wenn der Wert 0 Grad beträgt, ändert sich das Bild nicht. Wenn der Wert nicht festgelegt ist, ist der Standardwert 0 Grad. Obwohl dieser Wert keinen Maximalwert hat, ist ein Wert über 360 Grad gleichbedeutend mit einer erneuten Drehung

Umkehren

Umkehren

 Invertieren Sie das Eingabebild durch Invertieren. 100 % bedeutet vollständige Invertierung, ein Wert von 0 % bedeutet keine Veränderung des Bildes. Wenn der Wert nicht festgelegt ist, ist der Wert standardmäßig 0

Transparenz

Opazität

Opazität stellt die Transparenz des dar Bild. Ein Wert von 0 % bedeutet vollständige Transparenz, ein Wert von 100 % bedeutet keine Veränderung des Bildes. Wenn der Wert nicht festgelegt ist, ist der Wert standardmäßig 1. Diese Funktion ist dem vorhandenen Opazitätsattribut sehr ähnlich. Der Unterschied besteht darin, dass einige Browser über den Filter eine Hardwarebeschleunigung bereitstellen, um die

Helligkeit

Helligkeit zu verbessern

  Machen Sie es heller oder dunkler, indem Sie die Helligkeit anpassen. Bei einem Wert von 0 % ist das Bild vollständig schwarz. Wenn der Wert 100 % beträgt, erfolgt keine Änderung am Bild. Werte über 100 % sind in Ordnung und das Bild wird heller als zuvor. Wenn kein Wert eingestellt ist, ist der Standardwert 1. Wenn ja, ist das Bild vollständig grau. Der Wert beträgt 100 % und das Bild bleibt unverändert. Die Werte können 100 % überschreiten, was bedeutet, dass ein geringerer Kontrast verwendet wird. Wenn kein Wert eingestellt ist, ist der Standardwert 1

Unschärfe

Unschärfe

Stellen Sie die Gaußsche Unschärfe auf das Bild ein verwischen. Der „Radius“-Wert legt die Standardabweichung der Gaußschen Funktion fest, also wie viele Pixel auf dem Bildschirm zusammengemischt werden. Je größer der Wert, desto unschärfer ist es. Wenn kein Wert festgelegt ist, ist der Standardwert 0; dieser Parameter kann den CSS-Längenwert festlegen, akzeptiert jedoch keine Prozentwerte

Shadow

Schlagschatten

  Schlagschatten (H-Schatten-V-Schatten-Unschärfe-Spread-Farbe) wird verwendet, um einen Schatteneffekt auf dem Bild festzulegen. Schatten werden unter dem Bild zusammengesetzt und können unscharfe, versetzte Versionen der Matte sein, die in einer bestimmten Farbe gemalt werden können. Funktionen akzeptieren Werte vom Typ

(im CSS3-Kontext definiert), mit der Ausnahme, dass das Schlüsselwort „inset“ nicht zulässig ist. Diese Funktion ist dem vorhandenen Box-Shadow-Attribut sehr ähnlich; der Unterschied besteht darin, dass einige Browser über den Filter Hardwarebeschleunigung für eine bessere Leistung bereitstellen

Die Parameter lauten wie folgt:

 Obwohl Drop-Shadow keinen inneren Schatten unterstützt, kann es den Schatten unregelmäßiger Bilder erzielen, während Box-Shadow dies nicht erreichen kann

 [Hinweis] Detaillierte Informationen zu Box-Shadow-Bewegungen finden Sie hier

Weitere Artikel zum Thema CSS-Filter finden Sie auf der chinesischen PHP-Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Simulation der MausbewegungSimulation der MausbewegungApr 22, 2025 am 11:45 AM

Wenn Sie jemals eine interaktive Animation während eines Live -Vortrags oder einer Klasse anzeigen mussten, wissen Sie vielleicht, dass es nicht immer einfach ist, mit Ihren Folien zu interagieren

Suchen Sie die Suche mit Astro -Aktionen und Fuse.jsSuchen Sie die Suche mit Astro -Aktionen und Fuse.jsApr 22, 2025 am 11:41 AM

Mit Astro können wir während unseres Builds den größten Teil unserer Website generieren, verfügen jedoch über ein kleines Stück serverseitiger Code, mit dem Suchfunktionen mithilfe von so etwas wie Fuse.js. In dieser Demo werden wir Fuse verwenden, um eine Reihe persönlicher "Lesezeichen" zu durchsuchen.

Undefiniert: der dritte boolesche WertUndefiniert: der dritte boolesche WertApr 22, 2025 am 11:38 AM

Ich wollte eine Benachrichtigungsnachricht in einem meiner Projekte implementieren, ähnlich wie in Google Docs, während ein Dokument speichert. Mit anderen Worten, a

Zur Verteidigung der ternären ErklärungZur Verteidigung der ternären ErklärungApr 22, 2025 am 11:25 AM

Vor einigen Monaten war ich in Hacker News (wie einer) und stieß auf einen (jetzt gelöschten) Artikel über die Nichtverwendung von If -Anweisungen. Wenn Sie neu in dieser Idee sind (wie ich

Verwenden der Web -Sprach -API für mehrsprachige ÜbersetzungenVerwenden der Web -Sprach -API für mehrsprachige ÜbersetzungenApr 22, 2025 am 11:23 AM

Seit den frühen Tagen der Science -Fiction haben wir über Maschinen geträumt, die mit uns sprechen. Heute ist es alltäglich. Trotzdem die Technologie für die Herstellung

Jetpack Gutenberg BlöckeJetpack Gutenberg BlöckeApr 22, 2025 am 11:20 AM

Ich erinnere mich, als Gutenberg in den Kern entlassen wurde, weil ich an diesem Tag in Wordcamp war. Inzwischen sind einige Monate vergangen, also stelle ich mir immer mehr von uns vor

Erstellen einer wiederverwendbaren Paginationskomponente in VueErstellen einer wiederverwendbaren Paginationskomponente in VueApr 22, 2025 am 11:17 AM

Die Idee hinter den meisten Webanwendungen besteht darin, Daten aus der Datenbank abzurufen und sie dem Benutzer bestmöglich vorzustellen. Wenn wir dort mit Daten umgehen

Verwenden Sie 'Box Shadows' und Clip-Pad zusammenVerwenden Sie 'Box Shadows' und Clip-Pad zusammenApr 22, 2025 am 11:13 AM

Lassen Sie sich ein wenig Schritt für Schritt von einer Situation machen, in der Sie nicht ganz das tun können, was zu sinnvoll ist, aber Sie können es trotzdem mit CSS-Tricks erledigen. In diesem

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software