Explication détaillée de la propriété de filtre CSS3-tutoriel CSS-php.cn

Explication détaillée de la propriété de filtre CSS3

php中世界最好的语言

Libérer： 2018-03-21 17:02:08

original

2125 Les gens l'ont consulté

Cette fois, je vous apporte une explication détaillée de l'attribut filtre CSS3 Quelles sont les précautions lors de l'utilisation de l'attribut filtre CSS3 Voici les cas pratiques, jetons un coup d'oeil ? .

J'ai récemment découvert un attribut CSS3 très puissant lors du processus de création d'un site Web, qui est l'attribut de filtre. Les amis qui aiment les images p devraient savoir ce qu'est cet artefact 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.

1. Définition

filtre, qui signifie littéralement filtre L'attribut de filtre officiel définit les effets visuels de l'élément (généralement < img>). (par exemple : flou et saturation) ; par exemple :

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

Copier après la connexion

Voir ceci En conséquence, les blogueurs ont-ils commencé à devenir intéressé par les filtres ?

2. Syntaxe

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 :

Utilisez le réglage sépia ici

Exemple

Image

 <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

3. Exemple

　 Ci-dessous, pour l'attribut filtre Quelques valeurs sont utilisées à titre d'exemple. D'autres choses intéressantes doivent être découvertes par d'autres blogueurs. Si vous avez des choses intéressantes, vous pouvez les partager avec moi

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

Rendu :

     <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

( 2) flou(flou)

flou (effet de flou, unité px) 　　

Exemple d'image :

     <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

(3) inverser la couleur inversée

inverser la couleur inversée transformera l'image en négatif. Il est inutile d'en dire plus, regardez le code :

Exemple d'image. :

 <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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :