Heim Web-Frontend CSS-Tutorial Leitfaden zu CSS-Filtereigenschaften: Filter und Graustufen

Leitfaden zu CSS-Filtereigenschaften: Filter und Graustufen

Oct 21, 2023 am 11:13 AM
css Filtereigenschaften grayscale

CSS 过滤属性指南:filter 和 grayscale

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;
}
Nach dem Login kopieren

Häufig verwendete Filterattributfunktionen sind:

  1. blur: Das Bild verwischen, der Wert ist Pixel oder Prozentsatz.
  2. Helligkeit: Passen Sie die Bildhelligkeit an, der Wert ist ein Prozentsatz.
  3. Kontrast: Bildkontrast anpassen, Wert ist Prozentsatz.
  4. Graustufen: Wandeln Sie das Bild in Graustufen um, der Wert ist ein Prozentsatz.
  5. invertieren: Das Bild umkehren, der Wert ist ein Prozentsatz.
  6. Sepia: Bild in Sepia umwandeln, Wert ist Prozentsatz.
  7. saturate: Sättigungsänderung, Wert ist Prozentsatz.
  8. Opazität: Elementtransparenz festlegen, Wert ist Prozentsatz.

3. Codebeispiele:
Das Folgende sind Codebeispiele für einige häufig verwendete Filtereffekte:

  1. Graustufeneffekt (Graustufen):

    img {
     filter: grayscale(100%);
    }
    Nach dem Login kopieren
  2. Unschärfeeffekt (Unschärfe):

    element {
     filter: blur(5px);
    }
    Nach dem Login kopieren
  3. Helligkeitsanpassungseffekt (Helligkeit):

    element {
     filter: brightness(80%);
    }
    Nach dem Login kopieren
  4. Kontrastanpassungseffekt (Kontrast):

    element {
     filter: contrast(120%);
    }
    Nach dem Login kopieren
  5. Invertierungseffekt (Invertieren):

    element {
     filter: invert(100%);
    }
    Nach dem Login kopieren
  6. Sepia-Effekt (Sepia):

    element {
     filter: sepia(100%);
    }
    Nach dem Login kopieren
  7. Sättigungseffekt (gesättigt) ) :

    element {
     filter: saturate(150%);
    }
    Nach dem Login kopieren
  8. Elementtransparenzanpassungseffekt (Deckkraft):

    element {
     filter: opacity(50%);
    }
    Nach dem Login kopieren

    Die 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!

Erklärung dieser Website
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

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

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So isolieren Sie Stile in Komponenten in Vue So isolieren Sie Stile in Komponenten in Vue May 09, 2024 pm 03:57 PM

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 erweitert sein Kryptowährungsangebot mit der Einführung des Grayscale Bittensor Trust und des Grayscale Sui Trust Grayscale Investments erweitert sein Kryptowährungsangebot mit der Einführung des Grayscale Bittensor Trust und des Grayscale Sui Trust Aug 08, 2024 pm 09:19 PM

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 erweitert sein Produktportfolio mit der Einführung des Grayscale Avalanche Trust weiter Grayscale Investments erweitert sein Produktportfolio mit der Einführung des Grayscale Avalanche Trust weiter Aug 23, 2024 am 06:25 AM

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 mich für Bitstamp Exchange Pro? Ist es sicher? Ist es formell? Wie registriere ich mich für Bitstamp Exchange Pro? Ist es sicher? Ist es formell? Aug 13, 2024 pm 06:36 PM

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.

Die neueste Ranking -Liste der App Virtual Currency Trading Platform (Inventar der Top -10 -Handelsplattformen der virtuellen Währung) Die neueste Ranking -Liste der App Virtual Currency Trading Platform (Inventar der Top -10 -Handelsplattformen der virtuellen Währung) Mar 04, 2025 pm 03:51 PM

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.

Welches Format hat die Quelldatei? Welches Format hat die Quelldatei? May 09, 2024 pm 10:51 PM

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 führt Bittensor und Sui Trusts ein, um akkreditierten Anlegern Zugang zu TAO- und SUI-Tokens zu ermöglichen Grayscale führt Bittensor und Sui Trusts ein, um akkreditierten Anlegern Zugang zu TAO- und SUI-Tokens zu ermöglichen Aug 08, 2024 am 09:55 AM

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

Der von der SEC genehmigte Grayscale Bitcoin Mini Trust ETF wird mit einer niedrigen Gebühr von 0,15 % auf den Markt kommen Der von der SEC genehmigte Grayscale Bitcoin Mini Trust ETF wird mit einer niedrigen Gebühr von 0,15 % auf den Markt kommen Jul 28, 2024 am 06:21 AM

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 %.

See all articles