Maison > Article > interface Web > Introduction à l'attribut filter en CSS3
Introduction à l'attribut filter en CSS3
- 不言original
- 2018-07-02 10:11:481493parcourir
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 5811a0e55f5c071c3af8b2b3e8fe348d). (comme : flou et saturation) ; par exemple :
<style>
img{
/*灰度100%*/
-webkit-filter:grayscale(100%);
}
</style>
<img src="img/boke.png" alt="">
Voyant cet effet, les blogueurs ont-ils commencé à s'intéresser aux filtres ?
2. Syntaxe
filtre : aucun flou () | contraste() | () | hue-rotate() | invert() | opacity() | sepia() |
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>：
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>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>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>Exemple d'image :
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!