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 < img>). (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? GraustufenSchlagschatten
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>
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>
(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!
