Einführung in das Filterattribut in CSS3-CSS-Tutorial-php.cn

Einführung in das Filterattribut in CSS3

不言

Freigeben： 2018-07-02 10:11:48

Original

1500 Leute haben es durchsucht

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="">

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!