Explication détaillée de l'attribut de filtre CSS3-tutoriel CSS-php.cn

Explication détaillée de l'attribut de filtre CSS3

小云云

Libérer： 2017-12-19 10:38:34

original

2224 Les gens l'ont consulté

J'ai récemment découvert un attribut CSS3 très puissant, qui est l'attribut filter. Les amis qui aiment les images p devraient savoir de quel type d'artefact il s'agit en regardant son nom. Bien sûr, l'effet de cet attribut ne peut pas être comparé à celui de PS, mais s'il est bien utilisé, une image peut donner l'effet de deux images tout en économisant beaucoup d'espace. Cet article présente principalement des informations pertinentes sur le puissant attribut de filtre dans CSS3. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Définition

filtre, qui signifie littéralement filtre. L'attribut de filtre officiel définit l'effet visuel d'un élément (généralement ) (par exemple : flou et saturation) ; exemple :

<style>
    img{
　　　　　　/*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img src="img/boke.png" alt="">

Copier après la connexion

Voyant cet effet, les blogueurs ont-ils commencé à s'intéresser aux filtres ?

2. Syntaxe

Comme vous pouvez le voir, l'attribut a de nombreuses valeurs facultatives.

niveaux de gris
marron sépia (une sensation de vieille photo rétro)
saturation saturée
rotation de la teinte
inverser la couleur inversée
transparence de l'opacité
luminosité
contraste
flou
ombre portée

Par exemple :

Ici, utilisez sépia pour ajuster

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

Copier après la connexion

Exemple d'image :

3. Exemple

Ci-dessous, nous donnerons un exemple de plusieurs valeursde l'attribut filter. D'autres choses intéressantes doivent être découvertes par les blogueurs. S'il y a quelque chose d'intéressant, vous pouvez suivre Let. je le partage ensemble

(1) teinte-rotation (rotation des couleurs)

Jetons un coup d'oeil à l'image L'effet spécifique dépend de la découverte de chacun :

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

Copier après la connexion

Rendu ：

(2)flou(flou)

flou (effet de flou, unité px) 　　

     <style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

Copier après la connexion

Exemple d'image :

(3) inverser la couleur inversée

inverser la couleur inversée fera ressembler l'image à un négatif Il est inutile d'en dire plus, regardez le code :

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

Copier après la connexion

Exemples d'images :