Heim >Web-Frontend >CSS-Tutorial >Einführung in das Filterattribut in CSS3
Einführung in das Filterattribut in CSS3
- 不言Original
- 2018-07-02 10:11:481524Durchsuche
In diesem Artikel werden hauptsächlich relevante Informationen zu den leistungsstarken Filterattributen in CSS3 vorgestellt.
Der Blogger hat kürzlich eine sehr leistungsstarke Funktion beim Erstellen einer Website entdeckt ist das Filterattribut. Freunde, die p-Bilder mögen, sollten anhand des Namens wissen, um welche Art von Artefakt es sich handelt. Natürlich ist die Wirkung dieses Attributs nicht mit der von PS zu vergleichen, aber bei richtiger Verwendung kann ein Bild in die Wirkung von zwei Bildern umgewandelt werden und dabei viel Platz gespart werden.
1. Definition
Filter, was wörtlich Filter bedeutet. Das offizielle Filterattribut definiert die visuellen Effekte des Elements (normalerweise 5811a0e55f5c071c3af8b2b3e8fe348d). (wie zum Beispiel: Unschärfe und Sättigung); zum Beispiel:
<style>
img{
/*灰度100%*/
-webkit-filter:grayscale(100%);
}
</style>
<img src="img/boke.png" alt="">
Sehen Haben Blogger aufgrund dieses Effekts begonnen, sich für Filter zu interessieren?
2. Syntax
filter: none | () |. invert() |. sepia() |. Wie Sie sehen können, hat das Attribut viele optionale Werte ? Was bedeutet das? Graustufen- Sepiabraun (ein Retro-Altfoto-Feeling)
- sättigende Sättigung
- Farbton drehen, Farbtonrotation
- Umgekehrte Farbe umkehren
- Deckkrafttransparenz
- Helligkeit
- Kontrast
- Unschärfe
-
Schlagschatten - Zum Beispiel:
Verwenden Sie Sepia, um hier anzupassen
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
-webkit-filter:sepia(70%);
}
</style>
</head>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>Beispielbild:
Nachfolgend geben wir ein Beispiel für mehrere Werte des Filterattributs. Andere lustige Dinge müssen entdeckt werden von anderen Bloggern. Wenn Sie lustige Dinge haben, können Sie sie mit mir teilen
(1)hue-rotate(Farbrotation)
Siehe die Effekt-Bildleiste , der konkrete Effekt ist jedem selbst überlassen:
<style>
.img{
-webkit-filter:hue-rotate(330deg);
}
</style>
</head>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>Rendering:
(2)blur(blur)
Unschärfe (Unschärfeeffekt, Einheit px)
Invertieren lässt das Bild wie ein Negativ aussehen. Es ist sinnlos, mehr zu sagen:
<style>
.img{
-webkit-filter:blur(1px);
}
</style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>Beispielbild:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie im PHP-Chinesisch Webseite!
Verwandte Empfehlungen:
Analyse zum Unterschied zwischen Transformations-, Übergangs- und Animationsattributen in CSS3
Attribut verschieben in CSS3 Analyse von
Das obige ist der detaillierte Inhalt vonEinführung in das Filterattribut in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!