Heim > Artikel > Web-Frontend > Einführung in das Filterattribut in CSS3

Einführung in das Filterattribut in CSS3

不言Original: 2018-07-02 10:11:481409Durchsuche

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

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:

3. Beispiel

　 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

Verwendung des Attributs „position:fixed“, um DIV zu zentrieren

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!

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

Vorheriger Artikel：Verwenden Sie CSS3, um coole Flugzeugstartanimationen zu realisierenNächster Artikel：Verwenden Sie CSS3, um coole Flugzeugstartanimationen zu realisieren

In Verbindung stehende Artikel

Mehr sehen