Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Detaillierte Erläuterung der CSS3-Filtereigenschaft

php中世界最好的语言
Freigeben: 2018-03-21 17:02:08
Original
2125 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung des CSS3-Filterattributs . Was sind die Vorsichtsmaßnahmen bei der Verwendung des CSS3-Filterattributs? Werfen wir einen Blick darauf.

Kürzlich habe ich beim Erstellen einer Website ein sehr leistungsfähiges CSS3-Attribut entdeckt, nämlich das Filterattribut. Freunde, die p-Bilder mögen, sollten anhand des Namens wissen, was dieses Artefakt ist. 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>). (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 Sie sich das an. Infolgedessen haben Blogger begonnen, zu werden Interesse an Filtern?

2. Syntax

filter: none |.b

rightness() |. |. drop-shadow() |. hue-rotate() |. sepia() | viele Attribute Optionale Werte, was bedeuten sie?

Graustufen
  1. Sepiabraun (ein Retro-Altfoto-Feeling)
  2. sättigende Sättigung
  3. Farbton drehen, Farbtonrotation
  4. Umgekehrte Farbe umkehren
  5. Deckkrafttransparenz
  6. Helligkeit
  7. Kontrast
  8. Unschärfe
  9. Schlagschatten
  10. Zum Beispiel:

Sepia-Anpassung hier verwenden

Beispiel

Bild
 <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
:

3. Beispiel

  Nachfolgend werden für das Filterattribut einige Werte als Beispiel verwendet. Andere interessante Dinge müssen von anderen Bloggern entdeckt werden. Wenn Sie interessante Dinge haben, können Sie sie mit mir teilen

(1)hue-rotate(Farbrotation)

Schauen wir uns das Bild an. Der spezifische Effekt hängt von der Entdeckung jedes Einzelnen ab:

Rendering:

     <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

( 2) Unschärfe(Unschärfe)

Unschärfe (Unschärfeeffekt, Einheit px)   

Beispielbild:

     <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

(3) invertierte Farbe

Invertierte Farbe verwandelt das Bild in ein Negativ. Es ist sinnlos, mehr zu sagen, schauen Sie sich den Code an:

Beispielbild :

 <style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So passen Sie Textauslassungen in CSS an


So verwenden Sie die Attributwertvererbung in CSS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS3-Filtereigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!