Leitfaden zu CSS-Filtereigenschaften: Filter und Graustufen
Leitfaden für CSS-Filterattribute: Filter und Graustufen
Einführung:
Das Filterattribut (Filter) in CSS kann der Webseite verschiedene Spezialeffekte und Effekte hinzufügen, wodurch die Seite reichhaltiger und attraktiver wird. Unter diesen ist Graustufen ein häufig verwendeter Filtereffekt, der Bilder in Schwarz-Weiß-Töne umwandeln kann. In diesem Artikel stellen wir die Verwendung des Filterattributs und Codebeispiele vor, insbesondere für die Implementierung von Graustufeneffekten.
1. Einführung in das Filterattribut:
Das Filterattribut ist ein neues Attribut von CSS3, das es uns ermöglicht, beim Rendern von Elementen Bildverarbeitung und Spezialeffekte durchzuführen. Mithilfe des Filterattributs können wir Bilder mit Unschärfe, Graustufen, Helligkeit, Kontrast und anderen Effekten verarbeiten. Das Filterattribut kann auf alle Elemente angewendet werden, einschließlich Bilder, Text, Hintergründe usw.
2. Die Syntax und allgemeine Attribute des Filterattributs:
Die grundlegende Syntax des Filterattributs lautet wie folgt:
element { filter: none | <filter-function> [<filter-parameter>]* | initial | inherit; }
Häufig verwendete Filterattributfunktionen sind:
- blur: Das Bild verwischen, der Wert ist Pixel oder Prozentsatz.
- Helligkeit: Passen Sie die Bildhelligkeit an, der Wert ist ein Prozentsatz.
- Kontrast: Bildkontrast anpassen, Wert ist Prozentsatz.
- Graustufen: Wandeln Sie das Bild in Graustufen um, der Wert ist ein Prozentsatz.
- invertieren: Das Bild umkehren, der Wert ist ein Prozentsatz.
- Sepia: Bild in Sepia umwandeln, Wert ist Prozentsatz.
- saturate: Sättigungsänderung, Wert ist Prozentsatz.
- Opazität: Elementtransparenz festlegen, Wert ist Prozentsatz.
3. Codebeispiele:
Das Folgende sind Codebeispiele für einige häufig verwendete Filtereffekte:
Graustufeneffekt (Graustufen):
img { filter: grayscale(100%); }
Nach dem Login kopierenUnschärfeeffekt (Unschärfe):
element { filter: blur(5px); }
Nach dem Login kopierenHelligkeitsanpassungseffekt (Helligkeit):
element { filter: brightness(80%); }
Nach dem Login kopierenKontrastanpassungseffekt (Kontrast):
element { filter: contrast(120%); }
Nach dem Login kopierenInvertierungseffekt (Invertieren):
element { filter: invert(100%); }
Nach dem Login kopierenSepia-Effekt (Sepia):
element { filter: sepia(100%); }
Nach dem Login kopierenSättigungseffekt (gesättigt) ) :
element { filter: saturate(150%); }
Nach dem Login kopierenElementtransparenzanpassungseffekt (Deckkraft):
element { filter: opacity(50%); }
Nach dem Login kopierenDie oben genannten Beispiele sind nur einige häufig verwendete Filtereffektbeispiele. Bei der tatsächlichen Verwendung können die Parameterwerte je nach Bedarf angepasst werden. Durch die Kombination verschiedener Filtereffekte können Sie weitere Spezialeffekte erzeugen.
Fazit:
Über das Filterattribut von CSS können wir Webseiten verschiedene Bildverarbeitungs- und Spezialeffekte hinzufügen, darunter Graustufen, einer der am häufigsten verwendeten Graustufeneffekte. In diesem Artikel werden die grundlegende Syntax und die allgemeinen Eigenschaften des Filterattributs kurz vorgestellt und einige Codebeispiele für häufige Auswirkungen aufgeführt. Durch die flexible Verwendung des Filterattributs können Sie der Seite mehr visuelle Attraktivität verleihen und das Benutzererlebnis verbessern.Das obige ist der detaillierte Inhalt vonLeitfaden zu CSS-Filtereigenschaften: Filter und Graustufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Die Stilisolierung in Vue-Komponenten kann auf vier Arten erreicht werden: Verwenden Sie bereichsbezogene Stile, um isolierte Bereiche zu erstellen. Verwenden Sie CSS-Module, um CSS-Dateien mit eindeutigen Klassennamen zu generieren. Organisieren Sie Klassennamen mithilfe von BEM-Konventionen, um Modularität und Wiederverwendbarkeit zu gewährleisten. In seltenen Fällen ist es möglich, Stile direkt in die Komponente einzufügen, dies wird jedoch nicht empfohlen.

Grayscale Investments hat mit der Einführung zweier neuer Kryptowährungs-Investmentfonds einen großen Schritt gemacht: den Grayscale Bittensor Trust und den Grayscale Sui Trust.

Grayscale Investments hat sein Produktportfolio durch die Gründung des Grayscale Avalanche Trust weiter ausgebaut. Dieser neue Fonds richtet sich an akkreditierte Anleger, um sie bei Investitionen in AVAX zu unterstützen

Wie registriere ich BitstampPro? Besuchen Sie die BitstampPro-Website. Geben Sie Ihre persönlichen Daten und Ihre E-Mail-Adresse ein. Erstellen Sie ein Passwort und akzeptieren Sie die Bedingungen. E-Mail-Adresse bestätigen. Ist BitstampPro sicher? Authentifizierung erforderlich. Erzwingen Sie die Verwendung der Zwei-Faktor-Authentifizierung. Die meisten Vermögenswerte werden im Kühlhaus gelagert. Verwenden Sie HTTPS, um die Kommunikation zu verschlüsseln. Führen Sie regelmäßige Sicherheitsüberprüfungen durch. Ist BitstampPro legitim? Registriert in Luxemburg. Reguliert durch den Luxemburger Finanzaufsichtsausschuss. Halten Sie die Vorschriften zur Bekämpfung der Geldwäsche und zur Kenntnis Ihrer Kunden ein.

In diesem Artikel werden die zehn führenden Kryptowährungsbörsen der Welt aufgeführt, darunter OKX, Binance, Gate.io, Huobi, Kraken, Coinbase, Kucoin, Crypto.com, Bitfinex und Bitstamp. Mit ihrer starken technischen Stärke, reichhaltigen Produktlinien, strengen Einhaltung und innovativen ökologischen Konstruktionen haben diese Börsen die Führung auf dem globalen Kryptowährungsmarkt übernommen. Der Artikel wird ihre speziellen Funktionen, technischen Architektur, Sicherheitsmaßnahmen, Compliance -Qualifikationen und Ökosystemkonstruktionen einführen, wodurch die Anleger Referenz zur Auswahl einer geeigneten Handelsplattform bieten.

Quelldateien sind nicht kompilierte Dateien, die Originalcode oder -daten enthalten, und ihre Formate variieren je nach Programmiersprache und Anwendung. Zu den gängigen Formaten gehören Textdateien (.txt, .csv), Programmiersprachen (wie .py, .java), Auszeichnungssprachen (wie .html, .css) und Bilddateien (wie .png, . jpg), Videodateien (wie .mp4, .avi) und andere Formate wie JSON (.json), PDF (.pdf), Word-Dokument (.doc) usw.

Grayscale Investments, ein Krypto-Asset-Manager, hat zwei neue Investmentfonds eingeführt: Bittensor und Sui. Am 7. August gab das Unternehmen bekannt, dass sich diese Trusts auf TAO und SUI konzentrieren würden

Nach dem erfolgreichen Ethereum Mini Trust-Modell hat die SEC nun den Bitcoin Mini Trust ETF von Grayscale genehmigt. Dies erfolgt zu einer niedrigen Gebühr von 0,15 %.
