Maison > Article > interface Web > Changez rapidement la couleur d'une image PNG à l'aide de CSS (deux méthodes)
Changez rapidement la couleur d'une image PNG à l'aide de CSS (deux méthodes)
- 藏色散人original
- 2021-08-31 11:12:565792parcourir
Dans l'article précédent "Comment créer un effet verre/flou en utilisant HTML et CSS ? 》L'article vous présente la méthode d'utilisation du HTML et du CSS pour créer des effets de verre/flou. Les amis intéressés peuvent le lire et en apprendre davantage~
Cet article vous présentera comment utiliser CSS pour changer rapidement la couleur des images PNG. , qui est aussi un développement quotidien. Une méthode relativement courante pour obtenir des effets.
Tout d'abord, vous pouvez télécharger le matériel d'image png présenté dans cet article Adresse de téléchargement : https://www.php.cn/xiazai/sucai/1733
(Vous pouvez télécharger l'image originale. ici ici)
Maintenant, je vais vous présenter deux méthodes d'implémentation :
La première méthode
Cet exemple utilise un filtre en niveaux de gris pour changer une image couleur en une image en niveaux de gris.
Le code est le suivant :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<h2>灰度图像</h2>
<img src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>L'effet est le suivant :
La deuxième méthode
Cet exemple utilise beaucoup de filtres pour l'image~
Le code est le suivant :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
width:40%;
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img class = "image1" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
<img class = "image2" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html> L'effet est le suivant :
Ensuite, vous devez ici comprendre un attribut de filtre important :
L'attribut de filtre définit l'effet visuel (tel que le flou et la saturation) de l'élément (généralement ).
L'attribut Filtre est principalement utilisé pour définir l'effet visuel de l'image. Il existe de nombreuses valeurs d'attributdans la fonction Filtre. La syntaxe est la suivante :
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜Les filtres utilisent généralement des pourcentages (tels que : 75 %). , bien entendu, ils peuvent également être exprimés en décimales (comme : 0,75) .
Remarque : L'attribut "filtre" non standard pris en charge par les anciennes versions d'Internet Explorer (4.0 à 8.0) est obsolète. Les navigateurs IE8 et versions antérieures utilisent généralement l'attribut opacity.
La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo, invitez tout le monde à apprendre le "tutoriel vidéo CSS" !
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!