Introduction à l'attribut filter en CSS3-tutoriel CSS-php.cn

Introduction à l'attribut filter en CSS3

不言

Libérer： 2018-07-02 10:11:48

original

1500 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur le puissant attribut de filtre en CSS3. Les amis qui en ont besoin peuvent s'y référer

Le blogueur a récemment découvert une fonctionnalité très puissante dans le processus de création d'un site Web. est l'attribut de filtre. Les amis qui aiment les images p devraient savoir de quel type d'artefact il s'agit en regardant le 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>). (comme : flou et saturation) ; par 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, quelles sont-elles ? Qu'est-ce que ça veut dire?

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 :

Voici un exemple d'image ajustée en sépia

 <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, nous donnerons un exemple de plusieurs valeurs de l'attribut filter , d'autres choses intéressantes. doivent être découverts par d'autres blogueurs. Si vous avez des choses intéressantes, vous pouvez les partager avec moi

(1)hue-rotate(rotation des couleurs)

Voir la photo pour l'effet A vous de découvrir l'effet spécifique :

     <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 que l'image se transformera en 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

Exemple d'image :

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois !

Recommandations associées :

Analyse sur la différence entre les attributs de transformation et de transition et d'animation en CSS3

Déplacer l'attribut en CSS3 Analyse de

Comment utiliser position:fixed attribut pour centrer DIV

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!